3

I'm trying to apply a drop shadow to an SVG element on hover. In doing so, however, it blurs/moves the text that's nested inside the SVG. I've tried using things like backface-visibility, which does stop the text moving, but it blurs the text by default, so isn't a suitable fix. Other fixes like perspective(1px) or blur(0px) haven't worked either.

The div is scaled, but it's done by a third party library, so I have no control over the scaling. Interestingly, removing the transition or changing the scale to 1 ensures there is no blurring.

Test link here: https://jsfiddle.net/65aj3evt/3/

I'm using Chrome version 84.0.4147.105

Thanks for any suggestions!

Jingo
  • 768
  • 1
  • 10
  • 23
  • 1
    In what browser is your problem? When I hover over the element the text stays just like before. Using Firefox 79.0 – NoNickAvailable Aug 04 '20 at 17:59
  • 1
    Can reproduce in Chrome 84. Nice question! – Daniel W. Aug 04 '20 at 18:00
  • @NoNickAvailable it's in Chrome. Will update the original post. – Jingo Aug 04 '20 at 18:09
  • 1
    This seems to be caused by the webkit render engine. For me it is only blurred while the animation is happening. This is caused by the scale of 0.65. When you set the scale to 1 or remove the animation the text will stay sharp. But a similar question I've found is https://stackoverflow.com/questions/14677490/blurry-text-after-using-css-transform-scale-in-chrome – NoNickAvailable Aug 04 '20 at 18:12
  • 1
    @NoNickAvailable - yep I've had the same observations. Thanks for the link, but I had already been through that and nothing has worked. Was hoping that there's been some better solutions since that post was made in 2013! – Jingo Aug 04 '20 at 18:19

0 Answers0