🕶️

【CSS】Safariでfilter: drop-shadowが崩れる

2022/05/19に公開

現象

filter: drop-shadowを使うとsafariで表示が崩れました。

コード例

filter: drop-shadow(0px 0px 15px rgba(0, 0, 0, 0.16));

この場合だと四隅が描画されなかった...

解決策

transformで明示的にGPUレイヤーの作成を促す。

transform: translateZ(0);

transform: translateZ(0);とは?

3D空間で要素をアニメートしていなくても、3Dレンダリングを可能にすることができる。
ここではtransform: translateZ(0); は、GPUアクセラレーションをトリガーする役割。

原因の考察

safariだとcss filterでGPUレイヤーが作成されないっぽい?
(GPU処理がRAMを消費するので無効にされたのでは)

Discussion