Bug 266826 – SVG in an iframe is incorrectly scaled instead of allowing scrolling

• Component: SVG
• Status: RESOLVED DUPLICATE

Created attachment 469181 [details]
HTML part of the testcase

Make a very wide SVG .svg file (eg. 10000px). Use height and width attributes, and viewbox to make it big.
Make a HTML page, and use an <iframe> to embed the SVG in the HTML page.
Use whatever approaches you can to try to make the SVG display in its native resolution.

Safari (tested 15-17 on Sonoma-Monterey, and 15 on iOS) is the only browser that scales the image so small that it is unusable, and refuses to allow it to display in its native size. All others show it at the correct size, and you scroll to see the rest.

I have tried using xhtml:meta viewport in the SVG, which has no effect. I have tried setting object-fit:none; which is ignored. I have tried using CSS to explicitly set the size. Nothing seems to work. It appears to be impossible to make the iframe scrollable when it is displaying an SVG file.

http://www.howtocreate.co.uk/working/svgscaling.html

Created attachment 469182 [details]
SVG file part of the testcase

[Ahmad Saleem]

bug 266702 fixes this issue. :)

Oh excellent!

Any idea if this will go out to older platforms, or if it will only go out on Sonoma and the latest iPhones? (Just wondering if I will have to keep maintaining my horrible hackaround forever because of abandoned hardware.)

[Alexey Proskuryakov]

Duping per Ahmad's comment.

You can see that latest releases of Safari 17 support macOS Monterey, Ventura, and Sonoma. And iOS 17 supports devices as old as iPhone Xs. So historically, fixes become available to users of older devices.

When exactly workarounds can be removed depends on your user base, and how quickly they upgrade.

*** This bug has been marked as a duplicate of bug 266702 ***

Many thanks.