iPhone, iPad の safariでアニメーションがちらつく

前に「CSSアニメーションがちらつく場合」で書いたけど、iPhoneのcssアニメーションでtranslate3dを使うとちらつかなくなるってのがあった。
今回は別の理由。

■問題
幅2000pxくらいのデカい画像を左から右まで素早く移動させたり、「ページトップへ」なんてボタンをクリックして、ページの最上部まで素早く移動させたりする時にちらつきがおきる。

これは、iPhoneの場合スクリーンを中心とした「1024px × 1024px」*は画面の外だったとしても描画されていて、その範囲外の部分は再描画しないといけないからみたい。
そして、この再描画には少し時間がかかる。

なので、再描画される前にその範囲外だった部分まで移動すると、画像やその要素がまだ表示されていない状態で画面内に入ってきてしまう。

■対処法
・iPhone自体のデフォルトのスクロールスピードの範囲内だったら、再描画される前に画面内まで来てしまうことはないようなので、スクロールのスピードを調整する。
・再描画される前に画面内まで来ないように、スクロールのスピードを調整する。
・でかい画像や要素をスクロールしているのなら、それを1024px以内になるように分割して順番にスクロールさせる。
とかかな

*iPadの描画範囲はいくつだろう？iPhoneの比率から考えると画面の縦横2倍ずつくらいかな。

参考：
Fast animation with iOS WebKit（英語）