iOS6でtransitionアニメーションが少し遅れて開始する問題

よくあるスワイプギャラリーを作成しているとiOS6でアニメーションが少し遅れて開始する問題にぶつかりました。

どういった感じかというとスワイプ終了時に以下のようにしてtransitionを利用して規定位置までアニメーションさせようとすると一拍あいてから動き出す。iOS5だとちゃんと動作します。

$("#carouselInner")
	.css("-webkit-transition","-webkit-transform 600ms ease")
	.css("-webkit-transform","translate3d("+x+"px,0,0)");

色々調べていると以下のページに行き当たりました。

１つ目の内容は「Not all CSS Properties trigger hardware acceleration any more」という感じでwebkit-transform: preserve-3dではハードウェアアクセラレーションにならないよという内容。これは有名。

２つ目の内容は「Overlapping with other Elements」。

'overflow: hidden;' や 'overflow: visible;'をもつ要素で包まれた要素のアニメーション起動はちょっと時間がかかるよ。普通に動かしたかったら包む要素でもハードウェアアクセラレーションが動作するようにしよう、的な内容。

以下のようなコードを追加することでアニメーションが遅延して発生する現象をなくすことができます。

$("#carouselWrap").css({
	"-webkit-transform":"translate3d(0,0,0)",
	"-webkit-backface-visibility":"hidden"
})

もうね、iOS6とか爆発したらいいよ。

to-Rについて: JavaScriptやCSS、React/Angularなどのフロントエンド情報を発信しています。
書いてる人: 西畑一馬 (株式会社トゥーアール)
代表取締役/フロントエンドエンジニア
株式会社トゥーアールについて: 渋谷にあるフロントエンドに特化したWeb制作会社です。フロントエンドの実装についてお困りの事がありましたらお気軽にご相談ください。
株式会社トゥーアールへのお問い合わせ

最近のエントリー