【css】スマホでfilterのdrop-shadowが反映されなかった

スマホでdrop-shadowが反映されなかった時の備忘録

解決方法

transform: translateZ(0);を使う

.drop-shadow {
  filter: drop-shadow(14px 14px 28px rgba(0, 0, 0, 0.2));
  transform: translateZ(0);
}

これでdrop-shadowが使えるようになる
上記記述してGPUレイヤーの作成を促す必要があるみたい
ちな、will-change: filter;でも行けるらしい