[CSS]iphoneでアニメーションがちらついた時の解決法
こんにちは、ma-ya’s CREATE［まーやずくりえいと］です。
先日スマホのハンバーガーメニューの実装をしているときバグに出くわしたんですが、意外なプロパティで解決したので今回はそんなお話。
iphone端末でアニメーションがちらつく
はい。アニメーション関連です。
アニメーションは実装してて楽しいんだけど、解決法が厄介なことも多々あったりして諸刃の剣って感じですね。
今回遭遇したのは、iphone端末のみ（safariやchrome恐らく全てのブラウザ？）でアニメーションがちらつくバグでした。
具体的に言うと、半透明（background-colorにrgbaで色指定）のハンバーガーメニューを横からスライドインさせる時に、
なぜか途中までrgbaのa(alpha値)が無視され、途中で急に半透明になるというもの。
ちなみにalpha値は最初から1以下に設定しており、background-colorにアニメーションは当ててないという状況です。
半ば投げやりにbackface-visibility:hidden（-webkit-backface-visibility:hidden）を当ててみる
よくアニメーション関連のバグで指定されるやつですね。
アニメーションを強制的にブラウザのGPU処理に充てることで、アニメーションを滑らかにするというもの（超ざっくりですが）。
他にも transform: translate3d(0, 0, 0); とかでも強制的なGPU処理への移行が可能と言われてます。
しかしながらぼくの経験上、これで改善した試しは無いです苦笑
そもそも今回の場合スライドインの処理はtransform:translateで行っていたので元々パフォーマンスは良いはずなのです。
※この辺は長くなるんで割愛しますが、GPU処理でのアニメーションは2Dtransformでも可能と言われています。
結果、やっぱり改善しませんでしたとさ。
結論：perspectiveプロパティで解決した
これは聞いたことなかったんですが、アニメーションを当てる元要素に下記指定であっけなく改善しました。
perspective: 1000; //正の値
stack overflow だったかな…どっかで見つけたんですが、本当にあっけなく解決。
perspectiveはtransform3dで3d変形をする時に視点をどれだけ離すかっていうプロパティなんですが、なぜこれが効くのかはぶっちゃけ不明です。
言わずもがな、3d系のアニメーションをしている場合は見え方に影響しちゃうから使えません（たぶん）。
ちなみに指定する値は僕の場合正の値なら何でも大丈夫でした。
場合によってはベンダープレフィクスもいるかも。
transform / transition系のバグは↓の記事でもまとめてるんでよかったらどうぞ。
