filter property doesn't change body background image although `background-image` is specified

Issue

Now I will show this basis code. This style have two background image in body and .box. And have one img element as body child element.

body {
  background-image: url(http://placehold.jp/24/cccc99/999933/200x100.png?text=body_background);
}

.box {

  width: 100px;
  height: 100px;
  background-image: url(http://placehold.jp/24/cccc99/999933/200x100.png?text=bodychild_background);


}

<img src="http://placehold.jp/24/99cc99/339933/200x100.png?text=body_child">
<div class="box">
</div>

Next, I will add filter property to invert background-image in .box element. Following code work as expected(.box's background image is inverted). From this result, I can say filter property's invert effects is applied to background image also.

body {
  background-image: url(http://placehold.jp/24/cccc99/999933/200x100.png?text=body_background);
}

.box {

  width: 100px;
  height: 100px;
  background-image: url(http://placehold.jp/24/cccc99/999933/200x100.png?text=bodychild_background);
  filter: invert(1); /* Add filter. And .box background image is inverted */

}

<img src="http://placehold.jp/24/99cc99/339933/200x100.png?text=body_child">
<div class="box">
</div>

Next is the problematic case. I will add filter property to invert background-image in body element. However, following code does not work as expected although this code is doing essentially same thing for .box case. I expected inverted bacground image in body,

body {
  background-image: url(http://placehold.jp/24/cccc99/999933/200x100.png?text=body_background);
  filter: invert(1); /* Add filter. And body background image is not inverted. Why? */
}

.box {

  width: 100px;
  height: 100px;
  background-image: url(http://placehold.jp/24/cccc99/999933/200x100.png?text=bodychild_background);

}

<img src="http://placehold.jp/24/99cc99/339933/200x100.png?text=body_child">
<div class="box">
</div>

---

Now, I read the Filter Effects Module Level 1. In this specification, says that filter effects are applied after any CSS effects. So I can expect that filter property is applied after end of background-image's somehow all effects.

The compositing model follows the SVG compositing model [SVG11]: first any filter effect is applied, then any clipping, masking and opacity [CSS3COLOR]. These effects all apply after any other CSS effects such as border [CSS3BG].

And this specification also states that any parts of the drawing are effected by filter operations(including background!). Therefore, I suspect that the behavior in the problematic case is not what is expected in the specifications.

Conceptually, any parts of the drawing are effected by filter operations. This includes any content, background, borders, text decoration, outline and visible scrolling mechanism of the element to which the filter is applied, and those of its descendants. The filter operations are applied in the element’s local coordinate system.

Based on the above, I have two questions.

1. Does the last problematic case meet specifications? Is it expected result? I would like to know which part of the W3C spec describes this behavior.
2. If this is behaving differently than the spec, is the browser already aware of this bug?

Let me clarify that this is a question about a specification , not a question to request the code to get the expected behavior. (::before/::after pseudo element and somehow dummy element may be a workaround, but it is not the essence of this question)

I found several similar cases, but could not draw conclusions from these alone.

• How does filter behave on fixed background images? https://github.com/w3c/csswg-drafts/issues/238 (In Filter Effects Module Level 1 issues)
• crbug : Issue 591015: -webkit-filter doesn't change body background color unless background is specified in html
• CSS Filter not working on body in Chrome & Firefox

Solution

The issue is related to background propagation and not filter.

If you explicitly define a background on the html element, it will work as expected

body {
  background-image: url(http://placehold.jp/24/cccc99/999933/200x100.png?text=body_background);
  filter: invert(1); /* Add filter. And body background image is not inverted. Why? */
}

html {
  background: #fff;
}

.box {

  width: 100px;
  height: 100px;
  background-image: url(http://placehold.jp/24/cccc99/999933/200x100.png?text=bodychild_background);

}

<img src="http://placehold.jp/24/99cc99/339933/200x100.png?text=body_child">
<div class="box">
</div>

In your case, the filter is working fine but the background is no more applied on the body element but it was propagated to the html element and then to the canvas.

It does also explain why in your case the background is covering the whole area while in my example it covers only the body height

Answered By - Temani Afif