Open
Bug 1165767
Opened 10 years ago
Updated 3 years ago
CSS filters don't apply to background of <body> and <html> when propagated to canvas
Categories
(Core :: Layout, defect)
Core
Layout
Tracking
()
NEW
People
(Reporter: moz, Unassigned)
References
Details
Attachments
(2 files)
Mozilla/5.0 (Windows NT 5.1; rv:41.0) Gecko/20100101 Firefox/41.0
filter: grayscale() doesn't work for background of <body> and <html> elements (didn't test other filters).
In Blink it works for <html> and in this case:
html { -webkit-filter: grayscale(1);
filter: grayscale(1);
}
body { background: orange }
|
||
Comment 1•10 years ago
|
||
Note thread starting at https://lists.w3.org/Archives/Public/public-fx/2015JanMar/0052.html
In particular, per https://lists.w3.org/Archives/Public/public-fx/2015JanMar/0063.html the Blink example where the background is on <body> but the filter is on <html> should perhaps not work. But specifying both the background and the filter on <html> should.
Status: UNCONFIRMED → NEW
Ever confirmed: true
|
|
||
Updated•10 years ago
|
Summary: CSS filter:grayscale(1) doesn't apply to background of <body> and <html> → CSS filter:grayscale(1) doesn't apply to background of <body> and <html> when propagated to canvas
The discussion you've referred to doesn't make sense to me in the end:
(1) The default background color of body is commonly "transparent". The browser paints the body background color *above* the bottom canvas layer, which has a white background color.
(2) It particularly does so with background images, which may be partially transparent.
(3) When inverting elements, i.e. for DOM inspectors to highlight selected DOM elements, <body> is a valid element to highlight.
There is no reason for having the <body>/<html> element behave differently from all other elements and to introduce a special case.
|
|
||
Comment 4•10 years ago
|
||
I'm not sure how carefully you read the discussion here, but the <body>/<html> backgrounds are in fact treated differently from other elements already, so the special case is present no matter what. The only question is how that special case interacts with filters. See http://www.w3.org/TR/CSS21/colors.html#background paragraphs 3 and 4 for the existing special-casing in the specs, which is implemented by all browsers.
Summary: CSS filter:grayscale(1) doesn't apply to background of <body> and <html> when propagated to canvas → CSS filters don't apply to background of <body> and <html> when propagated to canvas
(In reply to Boris Zbarsky [:bz] from comment #4)
Yes, the special behaviour in regard to applying the <body> background properties to the <html> background is known, and as you said, this thread here is about the filter property only.
What I'm saying is that I believe it's bad wording to claim that the <body> background equals the canvas. There is always a separate canvas layer below everything else, even <body>. Imagine a <body> element with a background image with alpha elements and rgba(0,0,0,0) as background color. What should be painted to the alpha regions? There always is a base canvas with a solid color (white?) that's rendered first to the window before anything else gets painted above.
In this regard it doesn't make sense to handle the <body>/<html> elements different from all other elements in regard to filters, transform or anything else. The Chrome browser does it right I'd say.
|
|
||
Comment 6•10 years ago
|
||
The point is, the <body> background is not actually painted in the normal background painting area for <body> when it gets propagated.
Anyway, the spec conclusion was that if you set a filter on <body> and a background on <body>, it should work. The only open spec question is what happens with a background on <body> and a filter on <html> or vice versa.
I see. Thanks for enlightening me.
But then Firefox is not behaving correctly at this time, does it? The CodePen I added to my original issue does exactly to that: Apply both, a filter and a background to the body element.
|
|
||
Comment 8•10 years ago
|
||
> But then Firefox is not behaving correctly at this time, does it?
Yes, which is why this bug is still open...
(In reply to Boris Zbarsky [:bz] (if a patch has no decent message, automatic r-) from comment #1)
> In particular, per
> https://lists.w3.org/Archives/Public/public-fx/2015JanMar/0063.html the
> Blink example where the background is on <body> but the filter is on <html>
> should perhaps not work. But specifying both the background and the filter
> on <html> should.
Seems like Chrome and Firefox agree now:
html { filter: grayscale(1);
background: yellow;
}
body { background: yellow;
}
Makes grey <body> and yellow <html>, needs background on both.
|
Reporter | |
Comment 10•8 years ago
|
||
|
||
Comment 11•4 years ago
|
||
Any news about this bug?
Filter seems to apply to everything inside BODY, but not the body itself, e.g., go to https://www.speedskating.ca/ and apply "filter: blur(15px)" to it -- a body background image stays unblurred, while a column of content in the middle of body is blurred as expected.
|
||
Updated•3 years ago
|
Severity: normal → S3
You need to log in
before you can comment on or make changes to this bug.
Description
•