Percentage canvas background-size resolved incorrectly for fixed-pos root element
Categories
(Core :: Web Painting, defect)
Tracking
()
| Tracking | Status | |
|---|---|---|
| firefox81 | --- | fixed |
People
(Reporter: gzbkfr, Assigned: emilio)
Details
Attachments
(3 files, 1 obsolete file)
User Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:79.0) Gecko/20100101 Firefox/79.0
Steps to reproduce:
Open the following sample (same issue when setting the "position" property on the <HTML> tag):
<!DOCTYPE html>
<html>
<head><title>Test</title></head>
<body style="background-image: url('hand.jpg'); background-size: 100%;position: fixed;">
</body>
</html>
Actual results:
When opening this page using Firefox, no background image is shown (blank page).
Removing either the "position" or the "background-size" CSS property make the background image appear.
Issue reproduced on several Firefox versions (Linux, Windows, Android). Other tested browsers do not show this behavior: when using other browsers the image is always displayed.
Expected results:
Despite the "position" property being set either on the <BODY> or the <HTML> tags, the "background-image" property should not be ignored, it should remain unaffected by this property and the image should appear the same way as if there was no "position" property set.
|
||
Updated•4 years ago
|
Sorry, unlike what is stated in the initial report, the position property MUST be set on the <HTML> element to trigger the issue :
Content of issue.html:
<!DOCTYPE html>
<html style="position: fixed;">
<head><title>Issue</title></head>
<body style="background-image: url('hand.jpg'); background-size: 100%; background-color: blue;">
<p style="font-size: 400%">This is a test.</p>
</body>
</html>
Settings anything background-related on the <HTML> tag seems to workaround the issue :
Content of workaround.html:
<!DOCTYPE html>
<html style="position: fixed; background-color: white;">
<head><title>Workaround</title></head>
<body style="background-image: url('hand.jpg'); background-size: 100%; background-color: blue;">
<p style="font-size: 400%">This is a test.</p>
</body>
</html>
So, my understanding of the issue is as follow:
-
When no background is configured on the
<HTML>tag, Firefox should use the background settings applied on the<BODY>tag. -
However, if a
positionstyle property is set on the<HTML>tag, and both abackground-imageandbackground-widthare set on the<BODY>tag, then thebackground-imagewill be ignored. Note that thebackground-colorwill still be taken into account: when opening issue.html the background appears blue instead of showing the background image as with other browsers. Normally, as long as the the background image file exists, the blue background should never be visible. -
On the other side, if a background is configured on the
<HTML>tag, then Firefox does not need to internally "move" the background defined on the<BODY>to the upper<HTML>tag, so thebackground-imagedoes not get lost in the process, thus producing the expected result, as shown in workaround.html.
|
Assignee | |
Comment 2•4 years ago
|
||
|
|
Assignee | |
Updated•4 years ago
|
|
|
Assignee | |
Comment 3•4 years ago
|
||
This is not a CSS bug per se. The percentage background-size is getting resolved against the wrong size looks like.
|
|
Assignee | |
Comment 4•4 years ago
|
||
I think this is the line that goes wrong, but would need to double-check: https://searchfox.org/mozilla-central/rev/491612fa0be0f809069ea62c6316bf452cacc816/layout/painting/nsCSSRendering.cpp#2748-2754
The issue is that since the root element is out-of-flow, the frame we find is the placeholder, which is zero-sized.
|
|
Assignee | |
Comment 5•4 years ago
|
||
|
||
Updated•4 years ago
|
|
||
Comment 8•4 years ago
|
||
| bugherder | ||
Description
•