Bug 241910

Summary: SVG SMIL animation in <img> tag breaks upon zooming-in in macOS Safari
Product: WebKit Reporter: Utkarsh Verma <utkarsh.verma>
Component: SVGAssignee: Nobody <webkit-unassigned>
Status: NEW    
Severity: Normal CC: graouts, sabouhallawa, webkit-bug-importer, zimmermann
Priority: P2 Keywords: InRadar
Version: Other   
Hardware: Unspecified   
OS: Unspecified   
Attachments:
Description Flags
SVG-SMIL-pinch-zoom
none
SVG-SMIL-menu-zoom none

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.