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のバグ