Bug 123087 - Height: auto on svg with viewBox and fixed width is 100%, not relative to width
Summary: Height: auto on svg with viewBox and fixed width is 100%, not relative to width
Status: RESOLVED CONFIGURATION CHANGED
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: 528+ (Nightly build)
Hardware: Mac OS X 10.8
: P2 Normal
Assignee: Nobody
URL: http://jsfiddle.net/Qtxa6/
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2013-10-20 23:10 PDT by bjb5682
Modified: 2022-06-30 15:41 PDT (History)
8 users (show)

See Also:

Attachments
Safari 15.5 differs from other browsers (455.65 KB, image/png)
2022-06-17 15:29 PDT, Ahmad Saleem 		no flags Details
test-auto-height-viewBox (8.29 KB, image/svg+xml)
2022-06-30 15:39 PDT, Said Abou-Hallawa 		no flags Details
comparing auto-height-viewBox (789.40 KB, image/png)
2022-06-30 15:40 PDT, Said Abou-Hallawa 		no flags Details
View All Add an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.
Description bjb5682 2013-10-20 23:10:38 PDT 
Height: auto on svg with viewBox and fixed (non-auto) width is 100%, not relative to width like it should be. All other images seem to do this fine, maybe viewBox is messing it up.
Comment 1 Ahmad Saleem 2022-06-17 15:29:24 PDT 
Created attachment 460315 [details]
Safari 15.5 differs from other browsers

I am able to reproduce this bug in Safari 15.5 on macOS 12.4 based on attached JSFiddle from the URL field.

As seen in attached screenshot, Safari 15.5 output looks zoomed-in compared to other browser and it is not relative to width as it should be for other browsers.

I am unable to find any relevant bug in Blink (Chromium), which might be related to this and might have fixed it in Blink.

If I am testing incorrectly, please retest accordingly.Thanks!
Comment 2 Radar WebKit Bug Importer 2022-06-17 15:29:51 PDT 
<rdar://problem/95418099>
Comment 3 Said Abou-Hallawa 2022-06-30 15:38:19 PDT 
I think this bug is fixed. To compare the layout of the SVG in the browsers you have to resize the windows such that they have the same width. The SVG has with="100%" and its viewBox="0 0 1030 152". So the height of the SVG will be = 152 * page width / 1030.
Comment 4 Said Abou-Hallawa 2022-06-30 15:39:38 PDT 
Created attachment 460593 [details]
test-auto-height-viewBox
Comment 5 Ryosuke Niwa 2022-06-30 15:40:05 PDT 
Should we close this bug as config changed then? Or should we check in the test?
Comment 6 Said Abou-Hallawa 2022-06-30 15:40:33 PDT 
Created attachment 460594 [details]
comparing auto-height-viewBox
Comment 7 Said Abou-Hallawa 2022-06-30 15:41:23 PDT 
I think we should close it "Configuration Changed"