前に「CSSアニメーションがちらつく場合」で書いたけど、iPhoneのcssアニメーションでtranslate3dを使うとちらつかなくなるってのがあった。 今回は別の理由。 ■問題 幅2000pxくらいのデカい画像を左から右まで素早く移動させたり、「ページトップへ」なんてボタンをクリックして、ページの最上部まで素早く移動させたりする時にちらつきがおきる。 これは、iPhoneの場合スクリーンを中心とした「1024px × 1024px」*は画面の外だったとしても描画されていて、その範囲外の部分は再描画しないといけないからみたい。 そして、この再描画には少し時間がかかる。 なので、再描画される前にその範囲外だった部分まで移動すると、画像やその要素がまだ表示されていない状態で画面内に入ってきてしまう。 ■対処法 ・iPhone自体のデフォルトのスクロールスピードの範囲内だったら、再描画される前
![iPhone, iPad の safariでアニメーションがちらつく](https://cdn-ak-scissors.b.st-hatena.com/image/square/3f0065315f7fd3f4d8fb9be80e2df76fb0f64cde/height=288;version=1;width=512/https%3A%2F%2Fblogger.googleusercontent.com%2Fimg%2Fb%2FR29vZ2xl%2FAVvXsEhXB7D9agHC9HcIfC9QfAwnDQT92dKqf_hL14PCqvCj3KX6fUSNc_cixO33AsXZo7BH6DnYw-LjdwYdFjgTGJTpxVdAjWTYHY43SGqqgJGZN4mkhlEG50z7vQil-JjH7nHBIZSwjbqgGpk%2Fw1200-h630-p-k-no-nu%2Fiphone-reprint.png)