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

このエントリーをはてなブックマークに追加

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

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

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

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

iOS6 html hardware acceleration changes and how to fix them | indiegamr

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

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

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

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

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

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

関連エントリー

AndroidやiPhoneのHTML,CSS,JavaScriptのバグまとめ
クロスフェードを実現するCSS4のcross-fade()
レスポンシブイメージを実現するCSS4のimage-set
iOS6のリモートWebインスペクタ
スマートフォンとposition:fixedのバグ

スポンサードリンク

«MdN11月号に寄稿しました。 | メイン | [書評]ノンプログラマのためのJavaScriptはじめの一歩»

このエントリーのトラックバックURL
http://blog.webcreativepark.net/cgi/mt/mt-bt.cgi/657
コメントを投稿