iPad SafariのスクロールによりHTML要素が消えて遅れて再表示される

私は現在、html5およびjQuery for iPad Safariを使用してWebアプリを開発しています。大きなスクロール領域が原因で、画面の外にある要素が下にスクロールしたときに遅れて表示されるという問題が発生しています。

つまり、画面外にある画像（またはグラデーションのあるdiv）の行がある場合、下（または上）にスクロールすると、期待される動作は要素が画面に次のように表示されることです。私はそれにスクロールしています。

しかし、私が見ているのは、画面から指を離してスクローラーがすべてのアニメーションを完了するまで、要素が表示されないことです。

これは私にとって非常に顕著な問題を引き起こし、全体が不安定に見えますが、そうではありません。iPad Safariがメモリを節約するために何かしようとしているのだと思います。この途切れが起きないようにする方法はありますか？さらに、iPad Safariが実際に何をしようとしているのかを誰かに明かしていただければ幸いです。

ハードウェアアクセラレーションをより効果的に使用するには、ブラウザーをだます必要があります。空の3D変換を使用してこれを行うことができます。

-webkit-transform: translate3d(0,0,0)

特に、position:relative;宣言がある子要素でこれが必要になります（または、すべての子要素に対して実行してください）。

保証された修正ではありませんが、ほとんどの場合、かなり成功しています。

ハットヒント：https : //web.archive.org/web/20131005175118/http : //cantina.co/2012/03/06/ios-5-native-scrolling-grins-and-gothcas/

これが私の質問に対する完全な回答です。私は元々、@ Colin Williamsの回答を正解としてマークしていました。これは、完全な解決策を見つけるのに役立ちました。コミュニティメンバーの@Slipp D. Thompsonが私の質問を編集しました。約2.5年前から質問していて、SOのQ＆A形式を悪用していると言われました。彼はまた、これを答えとして別に投稿するように私に言った。だからここに私の問題を解決した完全な答えがあります：

@Colin Williams、ありがとう！あなたの答えとあなたがリンクした記事は、CSSで何かを試すことにつながりました。

そのため、以前はtranslate3dを使用していました。それは望ましくない結果を生み出しました。基本的に、それは私がそれらと対話するまで、画面外にある要素を切り刻み、レンダリングしませんでした。つまり、基本的に横向きでは、画面外にある私のサイトの半分が表示されていませんでした。これはiPad Webアプリです。これは、私が修正したためです。

相対的に配置された要素にtranslate3dを適用すると、それらの要素の問題は解決しましたが、他の要素は、画面外になるとレンダリングを停止しました。（アートワーク）とやり取りできなかった要素は、ページを再読み込みしない限り、再び表示されることはありません。

完全なソリューション：

*:not(html) {
    -webkit-transform: translate3d(0, 0, 0);
}

さて、これは最も「効率的な」ソリューションではないかもしれませんが、機能するのはそれだけでした。Mobile Safariは、を使用している場合、画面外の要素をレンダリングしないか、不規則にレンダリングすることがあり-webkit-overflow-scrolling: touchます。そのスクロールのために画面外に出る可能性のある他のすべての要素にtranslate3dが適用されていない限り、それらの要素はスクロール後に切り落とされます。

だから、再び感謝し、これが他の失われた魂を助けることを願っています。これは確かに私に大きな時間を助けました！

html以外のすべての要素を対象とする： *:not(html) 私の場合、他の要素で問題が発生しました。スタッキングコンテキストが変更され、一部のZインデックスが破損しました。

適切な要素をターゲットにして、-webkit-transform: translate3d(0,0,0)それにのみ適用することをお勧めします。

編集：がtranslate3D(0,0,0)機能しないことがあります。次のメソッドを使用して、適切な要素をターゲットにできます。

@keyframes redraw{
    0% {opacity: 1;}
    100% {opacity: .99;}
}

// ios redraw fix
animation: redraw 1s linear infinite;

translate3dが機能しない場合は、パースペクティブを追加してみてください。それはいつも私のために働きます

transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
perspective: 1000;
-webkit-perspective: 1000;

http://blog.teamtreehouse.com/increase-your-sites-performance-with-hardware-accelerated-css

-webkit-transform: translate3d(0,0,0)静的に要素に追加することは私にとってはうまくいきません。

このプロパティを動的に適用します。たとえば、ページがスクロールさ-webkit-transform: translate3d(0,0,0)れると、要素を設定します。その後、少し遅れて、このプロパティをリセットします。つまり、-webkit-transform: none このアプローチは機能するようです。

@Colin Williams、正しい方向に向けてくれてありがとう。

iOS7のiscroll 4.2.5でも同じ問題が発生しました。スクロール要素全体が消えるだけです。translate3d(0,0,0)ここで提案したように追加しようとしましたが、問題は解決しましたが、iscrollの「スナップ」効果が無効になりました。解決策"position:relative; z-index:1000;display:block"は、スクロール要素を保持するコンテナ全体にcssプロパティを与えることであり、translate3dを子要素に与える必要はありません。

時々動作しtranslate3dないかもしれません、それらの場合にperspectiveは使用することができます

transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
perspective: 1000;
-webkit-perspective: 1000;

私はこれを次の方法で解決したと確信しています：

overflow-y: auto;

（おそらくoverflow: auto;、必要に応じて機能します。）

回転が適用されたり、Zインデックスが使用されたりする場合があります。

回転：-webkit-transform要素を回転させるための既存の宣言では、外観の問題（のような-webkit-transform: rotate(-45deg)）にも対処できない場合があります。この場合-webkit-transform: translateZ(0px) rotateZ(-45deg)、トリックとして使用できます（Z回転を気にしてください）。

Zインデックス：回転と組み合わせて、などの正のz-indexプロパティを定義できますz-index: 42。「回転」で説明した上記の手順は、私の場合、空の場合でも問題を解決するのに十分でしたtranslateZ(0px)。この場合、Zインデックスがしていることけれども私は疑う原因と消滅をし、最初の場所で再び登場します。いずれの場合も、z-index: 42プロパティを保持する必要があります- -webkit-transform: translateZ(42px)だけでは不十分です。

これは、開発者が直面する非常に一般的な問題であり、主にとしてSafari's定義されposition : fixedた要素を再作成しないという性質によるものです。

したがって、位置プロパティを変更するか、他の回答で述べたように、ハックを適用する必要があります。

リンク1

リンク2

私の場合（iOS Phonegapアプリ）、translate3dを相対子要素に適用しても問題は解決しませんでした。私のスクロール可能な要素は、絶対的に配置されていて、上部と下部の位置を定義していたため、高さが設定されていませんでした。それを修正したのは、最小高さ（100px）を追加することでした。

以前のバージョンのFancyboxを使用して同じ問題が発生しました。v3にアップグレードすると問題が解決するか、次のように追加できます。

html, body {
    -webkit-overflow-scrolling : touch !important;
    overflow: auto !important;
    height: 100% !important;
}

Framework7＆Cordovaプロジェクトでこの問題に直面しました。上記のすべての解決策を試しました。彼らは私の問題を解決しませんでした。

私の場合、同じページで10以上のCSSアニメーションを使用しており、無限の回転（変換）が行われていました。アニメーションを削除する必要がありました。いくつかの視覚的機能がなくても問題ありません。

上記の解決策が役に立たない場合は、一部のアニメーションを削除し始めることができます。

-webkit-transform: translate3d(0, 0, 0);トリックは私のために動作しませんでした。私の場合、私は親を次のように設定しました：

// parent
height: 100vh;

これを次のように変更します。

height: auto;
min-height: 100vh;

他の誰かが同じ状況に直面している場合の問題を解決しました。

私の場合、CSSは問題を解決しませんでした。jQueryを使用しているときに問題に気づき、ボタンを再レンダリングしました。

$("#myButton").html("text")

これを試して

$("#myButton").html("<span>text</span>")