3Dアニメーション実装時にSafariでz-indexの値にバグが起きた。

3Dアニメーションを実装したサイトをデプロイしてみて、iphoneで表示を確認してみるとchromeではz-indexが問題なくかかっていたところにz-indexがかかっていませんでした。

原因を色々調べてみた所、以下のような記事を見つけました。

z-indexが効かない場合はtransformに気をつけよう！【Safari】

この記事によると、どうやらtransformで3dアニメーションを実装すると、safariではz-indexの値にバグが起きてしまうようです。

今回の記事では以下の三点をいい感じにまとめていきたいと思います。

• 起きた事象
• 原因
• 解決策

それではれっつらご！

起きた事象(z-indexが効かない)

冒頭でも話した通り、chromeでは問題なくz-indexが効いていた部分がsafariでみると以下のようにz-indexが正しく効いていないという事象が起きました。


前提として、この「送信する」というボタンですが、「hoverすると手前にくるっと回転する」という3Dアニメーションを実装しています。

原因(Safariのバグ)

コードをいじりながらz-indexが効かない原因を調べてみたのですが、transform: rotateX(0); を削除した場合にのみz-indexが正常に効くようになることがわかりました。

ここで、transformがどうやら怪しそうだと思い調べてみた所、

「Safariでは3D要素や3Dアニメーションを行う際、元の2D(z-index)の表示順が失われてしまう」というバグがあることを知りました。

詳しく知りたい方は冒頭でリンクを貼ってある記事を見てみてください。

解決策(transform: rotate3d()を指定する)

transform: rotateX(): でX軸方向のrotateを指定していた所を、transform: rotate3d(); によってz軸方向の値も指定することによって解決することができるみたいです。

z-index: 1;
transform: rotateX(0);
↓
z-index: 1;
transform: rotate3d(0, 0, 0, 0deg);

上記の方法でも解決しなかった

自分の場合、以上の手順通りにやってもz-indexの値がSafariではうまくいきませんでした。
それから自分なりに色々実験してみたところ、3Dアニメーションを実装している要素の親要素にoverflow: hidden;を設定すると表示が正しくなることがわかりました。

ただ理由はあんまわからないです。
Safari謎いです。
---

はい、ということで今回はSafariで3Dアニメーションを実装した時に起きるバグについてまとめてみました。
よくわからなかったですがとりあえず解決できて良かったです。
最後までごらんいただきありがとうございました！