0

Safari is displaying box-shadow cut when hovering SVGs. I assume this is a Safari only bug, as it renders fine on every other browser (Chromium based & Firefox).

enter image description here

If I apply the shadow to the static element as svg {box-shadow: 0px 0px 0px 1px #5030FF;} it shows fine.

Tried suggestions in the following threads but no luck. Ideally would like it to work with box-shadow, if the chance exists.

svg {
  border-radius: 50%;
}

svg:hover {
  box-shadow: 0px 0px 0px 1px #5030FF;
}
<div>
  <svg xmlns="http://www.w3.org/2000/svg" width="150" height="150" viewBox="0 0 150 150">
    <rect fill="#ddd" width="150" height="150" />
    <text fill="rgba(0,0,0,0.5)" font-family="sans-serif" font-size="30" dy="10.5" font-weight="bold" x="50%" y="50%" text-anchor="middle">150×150</text>
  </svg>
</div>
Syden
  • 8,425
  • 5
  • 26
  • 45
  • You might have a reason for not doing this - but why not wrap the SVG in a div and apply the shadow to that? – Michael Mullany Oct 08 '22 at 10:25
  • Thanks for the suggestion MIchael. Unfortunately, the parent div contains other sibling elements to the icon, so not feasible. The odd thing is, when you toggle hover via dev tools, it shows fine, so ideally we'd wait for a fix from Apple, though they ignore feedback & every Safari release ships buggier that it's previous one, clearly they don't care. They are more proactive trashing chromium based browsers in twitter than polishing their own ‍♂️. – Syden Oct 08 '22 at 14:54

1 Answers1

0

Adding a margin to the element equal to the spread value of the box-shadow worked for me in Safari. Although, Safari fixing or discontinuing their browser seems like a better solution.

svg {
  border-radius: 50%;
  margin: 1px
}

svg:hover {
  box-shadow: 0px 0px 0px 1px #5030FF;
}
<div>
  <svg xmlns="http://www.w3.org/2000/svg" width="150" height="150" viewBox="0 0 150 150">
    <rect fill="#ddd" width="150" height="150" />
    <text fill="rgba(0,0,0,0.5)" font-family="sans-serif" font-size="30" dy="10.5" font-weight="bold" x="50%" y="50%" text-anchor="middle">150×150</text>
  </svg>
</div>
JHeth
  • 7,067
  • 2
  • 23
  • 34
  • thanks for the suggestion, however, in the real scenario the `svg` already does have `margin` and the issue persists. Seems like Safari being Safari. – Syden Oct 07 '22 at 13:44
  • 1
    Maybe someday the world's biggest company will actually do something about their ancient browser... – JHeth Oct 07 '22 at 23:31