css - CSSアニメーションがiPadでのみSafariをクラッシュさせる

Question

私のサイトはiPadのSafariとiPadのみでクラッシュします。css3アニメーションを使用して、ヘッダーの大きな画像（4800 x 374px、ただし336 kbのみ）をアニメーション化しています。数十秒後、これによりSafariがクラッシュします。

あなたはhttp://bakabaka.nl/preview/leuk/でサイトを見ることができます

このクラッシュを防ぐことはできますか？もしそうなら、どのように？アニメーションをスムーズに実行できますか？今はとてもギザギザです...

Answer 1

これは暗闇でのショットですが、おそらく価値があります。

ハードウェア アクセラレーションを使用するため、iOS で 3D アニメーションを使用することをお勧めします。

-webkit-transform: translate3d(X,Y,Z);

詳細については、「 3D 変換関数」を参照してください。

また、iOS で非常に大きな画像を使用すると、問題が発生する可能性があります。たぶん、それらをバラバラに切る方が良い解決策になるでしょう。詳細については、「iOS リソースの制限を知る」を参照してください。

Answer 2

私も似たようなことを経験していました。壁に頭をぶつけているかもしれない他の人にとって、これはデスクトップと iOS の両方で Safari をクラッシュさせていました。そのセレクターは本当に好きではありません。::window-inactive

::-webkit-scrollbar-thumb:window-inactive {
     background: #f2f2f2; 
}