Closed Bug 1729354 Opened 4 years ago Closed 4 years ago

Gradient backgrounds on HTML element aren't applied when body has no margin

Categories

(Core :: Layout, defect)

Product:
Core
Component:
Layout
Version:
Firefox 91
Type:
defect

Tracking

()

Status:
RESOLVED DUPLICATE of bug 1684193

People

(Reporter: boreenpt, Unassigned)

Details

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:91.0) Gecko/20100101 Firefox/91.0

Steps to reproduce:

  1. Visit data:text/html,<html><head><style>html {width: 100%;background: linear-gradient(to right, blue, yellow) red;}body {width: 100%;margin: 0;}</style></head><body></body></html>
  2. Using devtools, remove margin rule on body tag

Actual results:

Gradient background is not applied to the HTML tag on page load, instead falling back to the solid red background. When the body has the margin: 0 rule removed, the expected gradient appears.

Expected results:

Gradient is visible regardless of margin on body.

The Bugbug bot thinks this bug should belong to the 'Core::Layout' component, and is moving the bug to that component. Please revert this change in case you think the bot is wrong.

Component: Untriaged → Layout
Product: Firefox → Core

I think the body's margin is only relevant here by virtue of the fact that it creates some nonzero height on the html element (unless you set it to 0, in which case the html element is 0 height and opts not to render its background-image which in this case is the gradient).

You can trigger the same issue just by directly setting height:0 on the html element. Chrome agrees with our behavior in that more-direct example, too, for what it's worth...

Status: UNCONFIRMED → RESOLVED
Closed: 4 years ago
Resolution: --- → DUPLICATE

I've duped this to bug 1684193 which is tracking the same issue.

Other browsers' behavior here seems to be a quirks-mode-specific thing -- i.e. they match Firefox if you add <!DOCTYPE html> to trigger standards-mode. Also, their quirk seems to be specific to cases where the root node is implicitly zero-height (via having an empty body with zero margin), but they agree with us and don't paint the background-image if the root node is explicitly set to zero height.

If you're running into trouble from this behavior-difference in a real webpage that you're developing, and you want the gradient to show up, you just need to ensure the html element is not zero height.

So you could e.g. add html { min-height:1px } to work around this, and that should fix things for you.

You need to log in before you can comment on or make changes to this bug.