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

Description Utkarsh Verma 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%.
Comment 2 Radar WebKit Bug Importer 2022-06-30 05:00:14 PDT 
<rdar://problem/96210761>
Comment 3 Said Abou-Hallawa 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.
Comment 4 Said Abou-Hallawa 2022-06-30 14:56:45 PDT 
Created attachment 460590 [details]
SVG-SMIL-pinch-zoom
Comment 5 Said Abou-Hallawa 2022-06-30 14:57:41 PDT 
Created attachment 460591 [details]
SVG-SMIL-menu-zoom