backdrop-filter

すりガラス風の効果を生むのがこれだ。半透明のパネルの向こうに背景が透けるが、上に載せた文字が読める程度にはぼやけている。見た目はmacOSやiOSから借用されたもので、Webデザインの定番になった。初めて使う人が驚く点が二つある。まず、要素が実際に部分的に透明でなければならない。背景が完全に不透明なら、フィルターを通して見るものがない。次にコストが現実的に大きい。新しいスタッキングコンテキストと専用のコンポジットレイヤーが作られ、広い面積を毎フレーム再計算すると、スマートフォンでページがカクつく最も確実な原因の一つになる。