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

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

[syo-sa19820615]

ハマってたのでメモ

[persee]

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

[kkeisuke]

backface-visibility hidden

[efcl]

ハードウェアアクセラレーションが有効でないと始動が遅くなる話

[goodFlat]

あ、ちょっとこれは危険な予感…。