IE6-8 is Not Supported

CSS3 transition プロパティを使い要素を動かしたときスマートフォンでカクつく場合の対処法

CSS3 で加わったプロパティでも特に使い勝手がいい transition プロパティ。
要素をスムーズにアニメーションさせることができます。
ただナビゲーションやコンテンツを移動させる際、カクつくことがあるので今回はそれの対処法。

以下のコードは当ブログに使用している transition 例。
すべての要素を ease-in-out で 0.25秒かけてアニメーション

	-webkit-transition: all 0.25s ease-in-out;
	   -moz-transition: all 0.25s ease-in-out;
	    -ms-transition: all 0.25s ease-in-out;
	     -o-transition: all 0.25s ease-in-out;
	        transition: all 0.25s ease-in-out;

1. カクつかないようにするには

色々なところで言われていますが、translate3d を使用します。
tlanslate3d を使うことで GPU アクセラレーターでアニメーション処理が実行されるようです。

	-webkit-transform: translate3d(100px, 0, 0);
	   -moz-transform: translate3d(100px, 0, 0);
	    -ms-transform: translate3d(100px, 0, 0);
	     -o-transform: translate3d(100px, 0, 0);
	        transform: translate3d(100px, 0, 0);

2. iOS でのちらつきを抑えるには

さらに iOS でちらつきを抑えるには transform-style に preserve-3d を指定しておくと良いのだとか。
iPhone 4 (iOS 6) で試したところなぜか最初の動作だけ少しちらつく。現在原因調査中。

	-webkit-transform-style: preserve-3d;
	   -moz-transform-style: preserve-3d;
	    -ms-transform-style: preserve-3d;
	     -o-transform-style: preserve-3d;
	        transform-style: preserve-3d;

このブログのスマホ時のメニューにも使用していますが、margin や position, height でメニューを動かしていたときに比べ、見違えるほどなめらかです。
スマホ用にサイトを作る際は是非!

Reference:
5590 – GPUアクセラレーターが使える環境で強制的に有効にできるCSSの指定方法

ads by google