web-dev-qa-db-ja.com

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

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

つまり、画面の外にある画像の行（またはグラデーションのあるdiv）がある場合、スクロールダウン（またはアップ）するとexpected behaviorはスクロールしているときに画面に表示される要素。

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

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

cssiosipadhtml5mobile-safari
157
codeBearer

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

@コリンウィリアムズ、ありがとう！あなたの答えと、あなたがリンクした記事は、CSSで何かを試してみることへの手がかりを与えてくれました。

それで、私は以前translate3dを使用していました。望ましくない結果が生じました。基本的には、オフスクリーンの要素を操作しない限り、オフスクリーンの要素は切り捨てられません。そのため、基本的に、横向きでは、オフスクリーンであった私のサイトの半分は表示されていませんでした。これはiPadのWebアプリであり、これが原因で修正されました。

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

完全なソリューション：

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

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

だから、もう一度感謝し、これが他の失われた魂を助けることを願っています。これはきっと私を大いに助けてくれました！

64
codeBearer

ハードウェアアクセラレーションをより効果的に使用するには、ブラウザーをだます必要があります。空の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/

177
Colin Williams

Html以外のすべての要素をターゲットにすると、*:not(html)は私の場合、他の要素で問題を引き起こしました。スタックコンテキストが変更され、一部のz-indexが破損しました。

正しい要素をターゲットにするを試して、-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;
12
Guillaume Gautier

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

6
Fellipe Lima

-webkit-transform: translate3d(0,0,0)を要素に静的に追加しても機能しません。

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

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

2
Alexander Poleschuk

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

1
yudarik

これは開発者が直面する非常に一般的な問題であり、主にSafari'sとして定義された要素を再作成しないというposition : fixedプロパティが原因です。

したがって、他の回答に記載されているように、位置プロパティを変更するか、何らかのハックを適用する必要があります。

Link1

Link2

0
arqam

Framework7とCordovaプロジェクトでこの問題に直面しました。上記のすべてのソリューションを試しました。彼らは私の問題を解決しませんでした。

私の場合、無限回転（変換）で同じページで10以上のCSSアニメーションを使用していました。アニメーションを削除する必要がありました。いくつかの視覚的機能が不足しているので大丈夫です。

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

0
yavuzkirez

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

0
b4tch

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

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

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

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

Zインデックス：回転とともに、z-indexのような正のz-index: 42プロパティを定義できます。 「ローテーション」で説明した上記の手順は、私の場合、translateZ(0px)が空であっても問題を解決するのに十分でした。ただし、この場合のZインデックスにはcausedが最初に消えて再出現する可能性があります。いずれの場合でも、z-index: 42プロパティを保持する必要があります--webkit-transform: translateZ(42px)だけでは十分ではありません。

0
Stefan Zurfluh

私はこれをちょうど解決したと確信しています：

overflow-y: auto;

（おそらく、overflow: auto;だけがあなたのニーズに応じて機能します。）

0
David Notik

translate3dが機能しない場合があります。その場合はperspectiveを使用できます

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