また随分空いてしまった。
だが、忙しかったが、決して忙しさが原因ではないのだ。（？）
さて、さっそく本題。
backdrop-filterは非常に有用なプロパティで、iOSのUIのようなガラス表現を、
CSSだけで実現できたり、ダイアログ系のUIの、視認性や可読性を高めることもしやすい。
だが、新しいプロパティ故、仕様が掴みづらかったり、
効かない時にその原因が分かりずらかったりする。
代表的な効かない原因として下記がある。
- その要素が position: static で、背景がほとんどない（透明）ため、結果が視覚的に分かりにくい
- ぼかしたい要素群が z-index 的に前面にいる（=そのフィルタを持つ要素より上に重なっている）
- ぼかしたい領域の一部だけ、その要素の矩形（width / height）の外に出ている
- ブラウザが backdrop-filter をサポートしておらず（または -webkit-backdrop-filter 必須な環境で）うまく適用されていない
まぁ、AIが上げてくれた原因なんだけどね。
そんな中私が直面した原因は上記のいずれも該当しなかった。
それ故、非常に特定と解決に時間がかかったのだ。
結論、
ぼかしを落としたい要素に背景がなく、透明だったから
であった。
まぁ、一つ目の原因が近かったのだが、
それにもまして、一部とは言わず大部分だったので、該当するとは言えなかったのだ。
例えば下記のような状況。（HTML内にスタイルを入れる）
<html>
<head>
<style>
.wrap { position: relative;}
.under {
text-align: center;
padding: 3em 0;
}
.upper {
background-color: rgba(255,255,255,0.4);
backdrop-filter: blur(5px) saturate(180%);
left: 0;
padding: 3em 0;
position: absolute;
text-align: center;
top: 0;
width: 100%;
}
</style>
</head>
<body>
<div class="wrap">
<p class="under">hogehoge<br>mogemoge</p>
<p class="upper">mogumoguokayu</p>
</div>
</body>
</html>
としていた場合。
p.upperを上に重ね、その下のレイヤーにガラス効果を適用したいとするってわけだ。
実は上記、backdrop-filterが効かないのだ。
なぜなら、下の要素からhtml、body要素まで全て背景が透明（設定されていない）だからなのだ。
当然各要素は、ユーザーエージェントで指定していない限りは、スタイルを当てなければ背景は透明だ。
その上で、どうやらbackdrop-filterは、下の要素の透明度が結果に影響を及ぼすようで、どこかで透過していない要素が重なっていないと、効かないようなのだ。
よって、上記も、
body { background-color: #FFF; }
をつけたりすると、急に効き出す。
なので、あらゆることをしても、backdrop-filterが効かない！となった時は、本記事のことを確認してみて欲しい。
ちなみに、なぜ本記事の話題があまり見つからないのかというと
bodyに背景色を設定していないことがそもそも滅多にないからだ。
私は、白だったら、別に設定しなくてもいいべ、的にやってなかった。
そのおかげでまさかあんなに時間を食う羽目になるとは思いもよらなかったわ。
というわけで、苦い経験を成仏させたい記事でした。
ではまた。
コメントする