[CSS]iOS12 Safari で clip-path の transition が効かなくなっちゃった
iOS11 Safari までは問題なかったはずですが、iOS12 にアップデートしたら clip-path の css transition が効かなくなってしまいました。（途中のトランジションがなくて始点・終点でパッと切り替わるという状態）
どうやらプロパティの組み合わせによって効かなくなってしまう模様です。
組み合わせNGなプロパティ
transform: translate3d(x, y, z)opacityfilter
思いつくままに試してみただけなので他にもありそうです。
transform: translate(x, y) の 2D のほうだと動きます。clip-path と一緒に x軸、y軸を動かしたいときはこちらを使うのがよいです。
opacity と併せて使いたいときはどうするべきか
クリップする要素を <div> で囲んでその要素に opacity をかけましょう。
サンプル
html
<body>
<div class="outerBox"> <!-- ← opacityをかける要素 -->
<div class="box">クリップされます</div> <!-- ← clip-pathをかける要素 -->
</div>
</body>
css
.outerBox {
transition: opacity 1s linear;
}
.outerBox.is-clipped {
opacity: 0;
}
.box {
clip-path: inset(0);
-webkit-clip-path: inset(0);
transition:
clip-path 1s ease-out,
-webkit-clip-path 1s ease-out;
}
.box.is-clipped {
clip-path: inset(0 0 0 100%);
-webkit-clip-path: inset(0 0 0 100%);
}
あとはなにかしらのきっかけ（ボタンをクリックとかスクロールして viewport に入ってきたらとか）で .outerBox と .box に .is-clipped をつければ OK です。
