background-image doesn't display if <html> (:root) has height = 0, in quirks-mode
Categories
(Core :: Layout, defect)
Tracking
()
People
(Reporter: vtwintiger, Unassigned)
References
Details
Attachments
(4 files)
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:60.0) Gecko/20100101 Firefox/60.0 SeaMonkey/2.53.5.1
Steps to reproduce:
Created a web page with body
margin: 0
background: linear-gradient(45deg, #49a09d, #5f2c82);
Actual results:
The background does not display.
Expected results:
The background should display.
|
||
Updated•5 years ago
|
|
||
Comment 1•5 years ago
|
||
The computed value of <html> height is zero if <body> margin is zero. If I specify zero to <html> height, background would not be rendered regardless of the <body> margin. If I set a nonzero value to <html> height, background would be shown regardless of the <body> margin.
|
||
Comment 2•5 years ago
|
||
Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:84.0) Gecko/20100101 Firefox/84.0
Hi,
I have managed to reproduce the issue in release 84.0.2, beta 85.0b6 and latest nightly 86.0a1 (2021-01-07). The issue is also reproducible in Fx70 (build id: 20190804214813).
Thanks for the report.
|
||
Comment 3•5 years ago
|
||
|
|
||
Comment 4•5 years ago
|
||
|
|
||
Comment 5•5 years ago
|
||
testcase 1 demonstrates the behavior-difference between Firefox and Chrome here. Firefox renders it with no background, whereas Chrome does render a background.
In testcase 2, neither browser renders a background. (Firefox is consistent between the two, whereas Chrome changes its behavior depending on quirks-mode vs. standards-mode.)
So there seems be some quirks-mode special-case behavior involved here, on Chrome's part...
|
|
||
Comment 6•5 years ago
|
||
Edge 18 (pre-chromium) and Safari (WebKit) match Chrome's behavior here, so this does seem to be a broadly-implemented quirks-mode behavior.
It looks like Firefox's behavior hasn't changed here (I get the same results -- both testcases blank[1] -- at least as far back as Firefox 4 (nightly 2011-01-01). Hence: I'm clearing the "Affected:" flags since it's not useful to maintain per-version flags for bugs like this that affect all versions.
[1] I used data:text/html,<body style="margin:0;background:-moz-linear-gradient(blue,purple);background:linear-gradient(blue,purple)"> when testing old builds, since back then we required the prefixed linear-gradient syntax.
|
|
||
Updated•5 years ago
|
|
|
||
Updated•5 years ago
|
|
|
||
Comment 7•5 years ago
|
||
(Also: this appears to be specific to background-image (which is the subproperty that the linear-gradient is populating here). We do render background-color reliably in both testcases here, if I add that locally.)
|
|
||
Comment 9•4 years ago
|
||
(In reply to Masatoshi Kimura [:emk] from comment #1)
If I specify zero to <html> height, background would not be rendered regardless of the <body> margin.
Here's a testcase to demonstrate this. Chrome agrees with us on this version (i.e. Chrome doesn't render the background-image gradient in this case.)
Description
•