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

現象

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を消費するので無効にされたのでは）