39

ページが大きくなりすぎたときに jQuery を使用して DOM を読み込んで操作すると、Mobile Safari がクラッシュするという問題があります。

iPhoneとiPadの両方で同じ問題が発生します。

エラーを見つけるためにモバイル ページをトラブルシューティングする最善の方法は何ですか? Mobile Safari をクラッシュさせる既知の問題はありますか?

4

7 に答える 7

30

私は実際に問題を見つけました。思ったように JS ではなく、CSS でした。一部の要素をフェードインする CSS トランジションを作成するクラスを追加しました。匿名ユーザーの場合、これらの要素はdisplay: none;不透明度遷移を実行したことがあり、おそらく実行したことはありません。

奇妙なことは、トランジションがちょうど 2 つの要素にあったことです。では、100 件以上のコメントを含む長いスレッドでのみクラッシュするのはなぜでしょうか?

要点は次のとおりです。-webkit-transition により、モバイル サファリでページがクラッシュしました。

于 2012-08-06T17:46:55.083 に答える
23

同じ問題がありました。私にとっては、それが-webkit-transform: translateZ(0);Safari のクラッシュの原因でした。

于 2012-11-29T10:24:44.643 に答える
19

私はこの質問が首尾よく答えられたことを知っていますが、私はこの質問の壁に何度も頭をぶつけていたので、私も5セントを入れたかっただけです:

ほとんどの回答がすでに指摘しているように、通常はメモリの問題に帰着します。ほとんどすべてのものは、「記憶の山」を最終的にひっくり返す最後のビットになる可能性がありtranslateZます。

ただし、私の経験では、具体的には実際の CSS (または JS) コマンドとは何の関係もありません。たまたま最後のトランジションが多すぎたのです。

私を大いに助ける傾向があるのは、現時点で見えないものを の下に置いておくことですdisplay: none。これは原始的に聞こえるかもしれませんが、実際にはうまくいきます。これは、ブラウザのレンダラーに、現時点ではこの要素が必要ないためメモリを解放することを伝える簡単な方法です。これにより、現時点で使用していない要素を非表示にする限り、あらゆる種類の 3D 効果を備えた長さ 1 マイルの垂直スクローラーを作成できます。

于 2013-02-14T01:45:12.450 に答える
1

最近、大量の画像 (30 以上で十分) とメニューのいくつかの変換を含む Web アプリ ページでモバイル サファリがクラッシュするという問題がありました。多くの試行錯誤の後、LinkedInと同様のソリューションに落ち着きましたが、angularjs を使用して無限スクロールを行いました。リストの上部と下部にrequestAnimFrameと 2 つの拡大/縮小 div (js スタイル属性を使用) を使用して、ビューポートに近いいくつかのものを除いて、すべての画像コンテナー (上部に他のものがオーバーレイされている) を削除しました。スクロールのパフォーマンス (ネイティブ、js なし) は問題なく、メモリ消費も抑えられています。

于 2014-03-27T21:38:41.093 に答える
0

私は同様の問題を抱えていました.WebページはAndroidデバイスでは魅力的に機能し、IOS（iPhoneとシミュレータ）ではクラッシュしました。

多くの調査 (ios_webkit_debug_proxy も使用) の後、問題が jQuery Ready イベントに関連していることがわかりました。

少しタイムアウトを追加すると、問題が解決しました。私のアプリケーションも iframe を使用していました。

$(document).ready(function () {
    window.setTimeout(function () { ready(); }, 10);
});
于 2014-03-04T17:12:27.033 に答える