1651754 - SVG in a button is given much larger size than in Chrome

Status: RESOLVED DUPLICATE of bug 1340715

(Core :: SVG, defect)

Description

[Thomas Wisniewski [:twisniewski]]

Attachment: testcase.html

In the attached test-case, Firefox does not seem to limit the size of the <svg> element in the <button>, while Chromium and WebKit do. This is causing layout issues on waitbutwhy.com.

Comment 1

[Cameron McCormack (:heycam)]

Two differences I can see:

1. If I add width="100%" height="100%" to the svg, then Chrome resolves the width against the default replaced element size (300), whereas we resolve it against the containing block width.
2. It seems like the lack of width and height attributes in Chrome causes the button to be sized as if it had no content (or if you added width="0").

Comment 2

[Karl Dubost💡 :karlcow]

if I use without nesting element.

data:text/html,<!doctype html><svg viewBox="0 0 6 6"><circle r="3" cx="3" cy="3" fill="blue"></circle></svg>

I get a full huge blue circle for every browsers full viewport

but as soon as it is inside the button (Tom's test)

data:text/html,<!doctype html><button><svg viewBox="0 0 6 6"><circle r="3" cx="3" cy="3" fill="blue"></circle></svg></button>

Big blue disc inside a button in Firefox
Disc not visible in Safari and Blink

Now if I use a simple div

data:text/html,<!doctype html><div><svg viewBox="0 0 6 6"><circle r="3" cx="3" cy="3" fill="blue"></circle></svg></div>

Then the 3 browsers have the same behavior.
Big blue disc full viewport

BUT if I add display:inline-block

data:text/html,<!doctype html><div style="display:inline-block"><svg viewBox="0 0 6 6"><circle r="3" cx="3" cy="3" fill="blue"></circle></svg></div>

Safari and Blink browsers the blue disc disappears, exactly like the button.

And for display: flex

data:text/html,<!doctype html><div style="display:flex"><svg viewBox="0 0 6 6"><circle r="3" cx="3" cy="3" fill="blue"></circle></svg></div>

Firefox and Chrome shows a big blue disc
Safari doesn't show the disc

So I have the feeling that the difference is due to inline-block context. button is an inline-block in the UA CSS.

That looks very close to all these different behaviors about SVG intrinsic sizing and viewbox and their relative contexts.

• Bug 1521882
• Bug 1638937
• Bug 987629
• Bug 1732780

This has a lot of paper cuts.

But probably we can see a lot of the differences in https://bug1638937.bmoattachments.org/attachment.cgi?id=9149930
Testcase by Daniel Holbert in Bug 1638937

Comment 3

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

With the patch in Bug 1340715, Firefox now behaves like Chrome for the testcase in comment 0. Tested on Firefox 106.0a1 (2022-09-01).