NEW241910
SVG SMIL animation in <img> tag breaks upon zooming-in in macOS Safari 
https://bugs.webkit.org/show_bug.cgi?id=241910
Summary SVG SMIL animation in <img> tag breaks upon zooming-in in macOS Safari
Utkarsh Verma
Reported 2022-06-23 04:59:09 PDT
I have a few SVG SMIL animation files which run well on every browser. But, when zoomed in on macOS Safari (any version), the animation breaks. It looks like the animation is bleeding through the right and bottom edges. And, this only happens when the SVG is in an <img> tag. If the SVG is used inline, there is no issue as such. When the page is zoomed in to 125% on macOS Safari (any version), you'll get, https://i.stack.imgur.com/WHhLY.gif (one of the files) To reproduce this bug, open up https://github.com/n3r4zzurr0/svg-spinners/blob/main/README.md, https://loading.io/spinner or http://samherbert.net/svg-loaders/ (as all these links contain SVGs in <img> tags) in macOS Safari (any version) with a zoom level other than 100%.
Attachments
SVG-SMIL-pinch-zoom (912.77 KB, image/png)
2022-06-30 14:56 PDT, Said Abou-Hallawa 		no flags
Details
SVG-SMIL-menu-zoom (945.66 KB, image/png)
2022-06-30 14:57 PDT, Said Abou-Hallawa 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Radar WebKit Bug Importer
Comment 2 2022-06-30 05:00:14 PDT
<rdar://problem/96210761>
Said Abou-Hallawa
Comment 3 2022-06-30 14:56:05 PDT
This bug does not happen with pinch-zoom but it happens with manual zoom: Cmd++ or Main menu/View/zoom in. See the attached screenshots.
Said Abou-Hallawa
Comment 4 2022-06-30 14:56:45 PDT
Created attachment 460590 [details] SVG-SMIL-pinch-zoom
Said Abou-Hallawa
Comment 5 2022-06-30 14:57:41 PDT
Created attachment 460591 [details] SVG-SMIL-menu-zoom
Note You need to log in before you can comment on or make changes to this bug.