1521882 - SVG without width/height specified has different intrinsic-sizing behavior in Chrome vs Firefox (e.g. in a float or in flexbox)

Status: RESOLVED DUPLICATE of bug 1340715

(Core :: Layout, enhancement, P3)

Description

[Thomas Wisniewski [:twisniewski]]

Attachment: testcase 1

In the attached testcase, Chrome will size the SVG to the width of the text below it, while Firefox seems to fit it to the window's width. This can cause SVG icons in flex layouts to be huge in Firefox, as seen in a PayPal page in https://webcompat.com/issues/24694

Comment 1

[Daniel Holbert [:dholbert]]

Attachment: testcase 2 (using 'float' instead of flex)

This isn't really flex-dependent -- it's just a question of what the max-content width of the SVG content is here.

One way to find that out is to use flexbox; another way is to wrap it in a float, as I've done here. (And this version shows the rendering difference as well.)

Comment 2

[Xidorn Quan [:xidorn] UTC+11]

Blink is probably not taking the SVG into consideration when calculating intrinsic size for an unsized SVG, which is probably the right behavior.

Actually our behavior is more buggy than that. If you add a width property via style editor then remove it, the box can be in arbitrary size.

Comment 3

[Firefox Bug Husbandry Bot]

Migrating Webcompat whiteboard priorities to project flags. See bug 1547409.

Comment 4

[Firefox Bug Husbandry Bot]

See bug 1547409. Migrating whiteboard priority tags to program flags.

Comment 5

[Ting-Yu Lin [:TYLin] (PDT, UTC-7)]

While investigating this, I found some related bugs.

Bug 1340715 is about SVGOuterSVGFrame::GetPrefISize may depend on previous layout results, which resonates with comment 2.

dholbert wrote a bunch of tests for SVG having intrinsic ratio but no intrinsic size in bug 1638937, which may be helpful while fixing SVG's intrinsic size.

Comment 6

[Karl Dubost💡 :karlcow]

Another instance of this https://webcompat.com/issues/67325
on the CBS website.

Comment 8

[Thomas Wisniewski [:twisniewski]]

I think this may be a dupe of bug 1651754 (or vice-versa).

Comment 9

[Ting-Yu Lin [:TYLin] (PDT, UTC-7)]

With the patch in Bug 1340715, Firefox now behaves like Chrome for SVG without width/height specified.

I didn't check all the webcompat reports, but at least both testcase 1 & 2 and https://webcompat.com/issues/109334 looks good on 106.0a1 (2022-09-01).