n3r4zzurr0/svg-spinners

Issues with rendering edges on macOS Safari 15

nvzqz opened this issue ยท 4 comments

nvzqz commented

The bottom and right edges render weirdly on macOS Safari 15.2. I do not see this issue on Safari 14.1 though.

Screen Shot 2022-06-15 at 00 41 26

I tested them in Safari 15.4 and 15.3 and the animations were running without any issue. According to you, they seem to be working fine in 14.1 too and this issue comes up in just 15.2 which seems pretty weird. Until now, I couldn't reproduce this behavior. I'll just keep this issue open in case anyone can add some more information to it.

+1 to that. Safari Version 15.5 (17613.2.7.1.8), Mac OS Monterey 12.4

I went to the Issues section to report one myself. But here's a hint: due to the bad eyesight I have a default page zoom set to 125%. When page zoom is set to 100% (default for most people), everything looks OK. But I have 125% set as default for all websites with no exceptions, and so far - only LinkedIn looks ugly, mostly due to, not surprising surprise!, icons.

This is a WebKit bug.

I was able to reproduce this bug and found out that using an animated SVG in an <img> tag on a page zoom level other than
100% is the only cause (on WebKit based browsers). Using them inline seems completely fine and consistent across browsers.

Possibly related: #11