web-dev-qa-db-ja.com

iOSは-webkit-overflow-scrollingでz-indexを尊重しません

問題：

IOSでは、z-indexを使用する場合、スクロール可能な領域の-webkit-overflow-scrollingは無視されます。 -webkit-overflow-scrollingを持つ2つのオブジェクトが重なる場合、上に表示されているオブジェクトではなく、下のオブジェクトがスクロールされます。

再現方法：

互いにオーバーレイする2つの要素を作成し（たとえば、position: absoluteを使用）、そのうちの1つがより高いz-indexを持ち、追加します

.selector
{
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

両方に。両方の要素には、スクロール可能な十分なコンテンツが必要です。

さらに追加

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="Apple-mobile-web-app-capable" content="yes"> 
<meta name="Apple-mobile-web-app-status-bar-style" content="black">

<head>に。次に、ページをホーム画面に追加して、そこから起動します。

次に、上の要素をスクロールしようとすると、下の要素が代わりにスクロールされます。

MCVE：

または、このペンをチェックアウトするだけです。 iOSデバイスからfullバージョンを起動し、ホーム画面に追加してそこから起動します。

環境：

テスト済みiPhone 5 andiPhone 6 with iOS 9.1およびiOS 9.3.2

観察：

  • この問題は、ホーム画面（ピン留めアプリ）またはXamarin Webview（UIWebViewおよびWKWebViewと関係がある可能性があります）からページ/アプリを起動する場合にのみ発生します
  • ページの読み込み後にデバイスの向き（ポートレート/ランドスケープ）を変更すると、ページが再読み込みされるまで問題が修正されます（再トリガーレイアウトが修正された可能性があります）。
  • 下位要素overflow-yをJS経由でhiddenに変更すると問題は解決しますが、overflowを切り替えると再描画が発生し、パフォーマンスの問題が発生します
  • height: 100%; width: 100%からhtml, bodyを削除すると問題も修正されますが、適切に機能するようにパーセント値を設定する必要があります

面倒な副作用を引き起こすことなくこの問題を解決するための適切な解決策/回避策が必要です。また、これが起こる理由の説明をいただければ幸いです。

htmlioscssscrollz-index
21
Aides

基本的に、あなたが経験しているのは-webkit-overflow-scrolling: touch;。 この回答 に従って、このバグを解決するには、スクロール可能なdivに次のCSSスタイルを追加します。

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

全体として、CSSのscrollableクラスのスタイルに上記のスタイルを追加すると、動作するはずです。 iOS 9を実行するiPhone 5sでテストしました。他のすべての上にあるスクロール可能なセクションの一番下または一番下までスクロールすると、本文のスクロールが開始されることに注意してください。

これらの追加スタイルが行うことは、iPhoneをだましてGPUを使用させることですが、Safariのバグのために必要なのは覚えているだけです-それはあなたのせいではなく、これらの追加スタイルを実際に含める必要はありません。しかし、それらをCSSにポップすると、夢のように機能するはずです！

7
Isaac Adni

あなたが彼らのような問題に直面していると仮定します。これらの投稿をご覧ください：

この助けを願っています！

1
Đông An

必要に応じてこのプロパティを動的に削除します。それはそれほど複雑ではなく、副作用を引き起こしません。

0
Mateus Milczewski

これに対する本当に簡単な修正は、スクロール時にクラスを本文に切り替え、スクロール可能なウィンドウをターゲットにすることです。 .scrollAをスクロールしている場合は、クラスscrollBをbodyに切り替えて、このJavascript/cssのようなものを適用するか、選択したjavascriptですべてを実行できます。

Javascript

$('#targetDivA').on('scroll touch', function(){
   $('body').toggleClass('scrollB);

   //or use this to navigate to it
   //$(this).siblings().toggleClass(\'scrollB\')
})

[〜＃〜] css [〜＃〜]

body.scrollB .targetDivB {
    pointer-events: none;
    /*this eliminates the device from using any event until removed*/
}

これがあなたの交尾に役立つことを願っています！

0
Caleb Swank