消える - safari バグ css




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

html: *:not(html)以外のすべての要素を対象にすると、私の場合は他の要素に問題が発生しました。 これはスタックのコンテキストを変更し、いくつかのz-indexを破損させました。

適切な要素をターゲットにして-webkit-transform: translate3d(0,0,0)を適用するようにして-webkit-transform: translate3d(0,0,0)

私は現在、iPad Safariのhtml5とjQueryを使ってWebアプリケーションを開発しています。 私は、大きなスクロールエリアでは、スクロールしていくうちに、オフスクリーンの要素が遅れて表示されるという問題が発生しています。

私が意味することは、オフスクリーンである画像の行(またはグラデーションを含むdiv)がある場合、その上にスクロール(または上)すると、 期待される振る舞いは要素が画面上に表示されることです私はそれにスクロールしています。

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

これは私にとって非常に目立つ問題を引き起こしています。 私は、iPad Safariがメモリを節約するために何かをしようとしていると推測しています。 この不安定な出来事を防ぐ方法はありますか? さらに、iPadのSafariが実際にやろうとしていることを誰かが明らかにすることができれば嬉しいです。


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


-webkit-transform: translate3d(0,0,0)を要素に静的に追加することは、私のためには機能しません。

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

私を正しい方向に向けるための@コリン・ウィリアムズ、ありがとう。


これは私の質問に対する完全な答えです。 私はもともと@ Colin Williamsの答えを正解とマークしていました。それは私が完全な解決に手伝ってくれたからです。 コミュニティのメンバーである@Slipp D. Thompsonは私の質問を編集して約2.5年後に私の質問を編集し、私がSOのQ&Aフォーマットを悪用していると言いました。 彼はまた別にこれを答えとして掲示するように言った。 だからここに私の問題を解決する完全な答えです:

@コリンウィリアムズ、ありがとう! あなたの答えとあなたがリンクした記事は私にCSSで何かを試してもらうためのリードを与えました。

だから、以前はtranslate3dを使っていました。 それは望ましくない結果をもたらしました。 基本的には、私がそれらとやりとりするまで、それはオフスクリーンであったRENDER要素ではなく、切り取られます。 だから、基本的には、風景の方向では、私のサイトの半分がオフスクリーンで表示されていませんでした。 これは私が修正にあったので、iPadのWebアプリケーションです。

相対配置された要素にtranslate3dを適用すると、それらの要素の問題は解決されましたが、他の要素はオフスクリーンになるとレンダリングが中止されました。 私がページをリロードしない限り、私がインタラクトできなかった要素(アートワーク)は、決してレンダリングされません。

完全なソリューション:

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

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

だから、もう一度感謝し、これが他の失われた魂に役立つことを願っています。 これは確かに大きな時間を助けました!


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

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

Link1

Link2


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

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

特に、 position:relative;を持つ子要素には、これが必要position:relative; 宣言(または、すべてを取り出してすべての子要素に行う)。

保証された修正ではなく、ほとんどの場合かなり成功しました。

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


私はFancyboxの古いバージョンを使用して同じ問題を抱えていました。 v3にアップグレードすると問題が解決されます。追加することもできます:

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

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

overflow-y: auto;

(おそらくoverflow: auto;あなたの必要に応じてあまりにも動作します。)





mobile-safari