CSS について body 要素の background-image に filter が効かないのはなぜですか？

前提

JavaScript - CSSでfilter要素を使ったのですが、背景にだけ適用されません。｜teratail
↑この質問に関連してなのですが。
「background-imageにはfilterが効かない」という回答があり、自分の認識と違ったので以下のコードで調べてみました。

該当のソースコード

html
1<img src="http://placehold.jp/24/99cc99/339933/200x100.png?text=body_child">
2<div>
3<img src="http://placehold.jp/24/cc9999/993333/200x100.png?text=div_child">
4</div>

css
1html{
2  filter: grayscale(100%);
3}
4body{
5  background-image: url(http://placehold.jp/24/cccc99/999933/200x100.png?text=body_background);
6  filter: invert(1);
7}
8div{
9  background-image: url(http://placehold.jp/24/9999cc/333399/200x100.png?text=div_background);
10  filter: blur(2px);
11}

https://jsfiddle.net/Lhankor_Mhy/9phjbnos/

「background-imageにはfilterが効かない」のであれば、div_backgroundにはblurが効かないはずですが、実際には効きました。
しかし、body_backgroundにはinvertが効いていないので、これに関しては「background-imageにはfilterが効かない」は正しいように見えます。
さらに、htmlにgrayscaleをかけたのですが、その子要素はbody_backgroundを除いて、スタイルが効いているように見えます。

質問

「bodyのbackground-imageには一切filterが効かない」と解釈してよさそうなのですが、これは正しいでしょうか。
1が正しいとすると、これはなぜでしょうか。仕様などで示していただけますと望ましいのですが、私的な解釈でもかまいません。

補足情報

ChromeとFirefoxの最新版で確認しました。

BA選出後のまとめ

結局、はっきりとはわからなかったのですが、kei344さんからご指摘があったとおり、filterの他にもtransformやopacityも効きませんでした。（opacityについては透過した先に何もないということかもしれませんが。）
一方で、s8_chuさんのご指摘のとおり、仕様に従えばfilterは効いてよさそうです。しかし、単純にバグだとすると、FirefoxとChromeで同じ振る舞いをしているのも気になります。

ちょっと気になるのは、CSS3のこの仕様です。

The root element does not paint this background again, i.e., the used value of its background is transparent.

CSS Backgrounds and Borders Module Level 3

（勝手訳：ルート要素は背景を再び塗ることはありません。つまり、ルート要素の背景は透明が使われるということです）

body要素の背景は描画される際にカンバスの背景として取り扱われ、body要素の背景は'transparent'と見なされる、と考えれば、「そもそもbody要素の背景ではなくなってしまうので、body要素へのCSSは効かない」と解釈でき、s8_chuさんのご指摘とも矛盾しないのかもなあ、などと思いました。

kei344

2019/07/08 06:47

特に回答でも無いのでここに書きますが、html要素にbackground-color or background-imageが付いている場合、body要素も効いているようです。

Lhankor_Mhy

2019/07/08 06:51

あ、なるほど……

s8_chu

2019/07/10 14:50

「『background-imageにはfilterが効かない』という回答」とは、どの回答を指していますか？どちらもそのような趣旨の回答に読めるので、念のため明確にしておきたいです。また、その回答をした人に直接コメントで尋ねてみても良いと思います。

Lhankor_Mhy

2019/07/11 04:41

yambejp さんのご回答の方です。

Lhankor_Mhy

2019/07/11 04:44

お二人に回答依頼をしてみました。

行動規範の内容に同意します

回答3件

「bodyのbackground-imageには一切filterが効かない」と解釈してよさそうなのですが、これは正しいでしょうか。

Filter Effects Module Level 1 に基づけば、これは誤りだと思います。

まず、フィルタ効果はどのような CSS よりも後に適用されるものです。これより、フィルタ効果は背景画像に対しても影響を及ぼすと考えられます。

§ 2. Module interactions

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].

次に、同仕様書には filter プロパティによるフィルタ効果はすべての描画部位に影響を及ぼすという記述があります。ここから、filter プロパティの適用対象が文書のルート要素や body 要素であっても、フィルタ効果が適用されると考えることが出来ます。

§ 5. Graphic filters: the filter property

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.

以上のことから、「html, body 要素に適用された background-image プロパティでのみ、フィルタ効果が無視される」という挙動は、誤りだと思います。キャンバスの背景ならばともかく、html もしくは body 要素により適用された背景が filter プロパティの影響を受けないことには違和感があります。

投稿2019/07/10 04:08

s8_chu

総合スコア14731

Lhankor_Mhy

2019/07/10 04:29

なるほど。つまり実装上の誤り、ということですね。

s8_chu

2019/07/10 04:32 編集

> つまり実装上の誤り、ということですね。はい、そのように考えています。 --- 用事があるので詳しく読んでいませんが、いくつかの issue から関連性のありそうなものを探したので、読んでみると何か新しいことがわかるかもしれません。 https://bugs.chromium.org/p/chromium/issues/detail?id=591015 https://bugs.webkit.org/show_bug.cgi?id=74886 https://bugzilla.mozilla.org/show_bug.cgi?id=1165767 https://github.com/w3c/fxtf-drafts/issues/282

行動規範の内容に同意します

ベストアンサー

特に回答でも無いのですが、html要素にbackground-color or background-image が付いている場合、body要素も効いているようです。

box-shadow や border をbody要素に設定した場合、grayscaleが効いています。
transform: scale(1.2); をbody要素に設定した場合、background-imageに影響がありませんでした。

（例示されたコードを基にFirefox/Chromeで確認）

投稿2019/07/08 07:29

kei344

総合スコア69407

Lhankor_Mhy

2019/07/08 08:03

ありがとうございます。・html要素に背景がある時は、通常の背景と同じ扱いになる・他にも無効になるスタイルがありそうということですか。

kei344

2019/07/08 08:20

そうですね。filterは「後背にある要素との合成」のプロパティなので、（HTML要素を特殊な要素と捉えて）後背に要素が無いbody要素のbackground-imageには効かないのかなぁ、という感じです。あと、body要素の背景に設定しただけで、「（要素としてのHTML要素で無く）ページの背景」になる指定（規定）とかがあるかもしれませんね。

Lhankor_Mhy

2019/07/08 08:30 編集

ご回答を参考に調べてみた感じ、それっぽい記述を見つけました。 https://www.w3.org/TR/CSS2/colors.html#background （ For HTML documents, のくだり）ただ、具体的な仕様はなさそう……？

行動規範の内容に同意します

仕様的には下記でしょうか・・