it-swarm.com.de

iOS berücksichtigt nicht den Z-Index mit -webkit-overflow-scrolling

Problem:

Bei iOS wird der z-index eines scrollbaren Bereichs bei Verwendung von -webkit-overflow-scrolling ignoriert. Wenn zwei Objekte mit -webkit-overflow-scrolling überlappen, wird das untere Objekt anstelle des oben angezeigten gescrollt.

Wie reproduzieren:

Erstellen Sie zwei übereinanderliegende Elemente (z. B. mit position: absolute), von denen eines einen höheren z-index hat, und fügen Sie hinzu

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

zu beiden. Beide Elemente sollten über genügend Inhalt verfügen, um scrollbar zu sein.

Zusätzlich hinzufügen 

<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">

zu Ihrem <head>. Fügen Sie dann die Seite zu Ihrem Startbildschirm hinzu und starten Sie sie von dort aus.

Wenn Sie dann versuchen, das obere Element zu scrollen, wird stattdessen das darunter liegende Element gescrollt.

MCVE:

Alternativ können Sie auch diesen Stift auschecken. Starten Sie die Version full von Ihrem iOS-Gerät aus, fügen Sie sie Ihrem Startbildschirm hinzu und starten Sie von dort aus.

Umgebung:

Getestet auf iPhone 5 und iPhone 6 mit iOS 9.1 und iOS 9.3.2

Beobachtungen:

  • Das Problem tritt nur beim Starten der Seite/App über den Startbildschirm (angeheftete App) oder in einem Xamarin-Webview auf (dies kann etwas mit UIWebView und WKWebView zu tun haben)
  • Nach dem Ändern der Ausrichtung des Geräts (Hochformat/Querformat) nach dem Laden der Seite ist das Problem behoben, bis die Seite neu geladen wird (wurde das Layout möglicherweise durch erneutes Auslösen des Layouts korrigiert?)
  • Das Ändern der unteren Elemente overflow-y in hidden über JS behebt das Problem. Das Umschalten von overflow führt jedoch zu einem Repaint, was zu Leistungsproblemen führt
  • Durch das Entfernen von height: 100%; width: 100% aus html, body wird das Problem ebenfalls behoben. Sie müssen jedoch eingestellt werden, damit die Prozentwerte ordnungsgemäß funktionieren

Erforderlich ist eine geeignete Lösung/Problemumgehung, um dieses Problem zu beheben, ohne störende Nebenwirkungen zu verursachen. Es wäre auch eine Erklärung, warum dies geschieht.

19
Aides

Im Wesentlichen haben Sie einen iOS-Fehler mit -webkit-overflow-scrolling: touch;. Um diesen Fehler zu lösen, fügen Sie gemäß dieser Antwort die folgenden CSS-Stile zu der scrollbaren div hinzu:

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

Alles in allem sollte es funktionieren, wenn Sie den Styles für die scrollable-Klasse in Ihrem CSS die oben genannten Styles hinzufügen. Getestet auf einem iPhone 5s, auf dem iOS 9 ausgeführt wird. Wenn Sie einen Bildlauf nach unten oder oben in den über alle anderen zu durchsuchenden Bildlauf ausführen, wird der Körper mit dem Bildlauf begonnen.

Ich glaube, dass diese zusätzlichen Styles das iPhone dazu verleiten, die GPU zu verwenden, aber denken Sie daran, dass sie nur aufgrund eines Fehlers bei Safari erforderlich sind. Es ist nicht Ihre Schuld, und diese zusätzlichen Styles sollten nicht unbedingt enthalten sein. Sie sollten sie jedoch in Ihr CSS einbinden und es sollte wie ein Traum funktionieren!

7
Isaac Adni
1
Đông An

Entfernen Sie diese Eigenschaft bei Bedarf dynamisch. Es ist weniger kompliziert und verursacht keine Nebenwirkungen.

0

Eine sehr einfache Lösung für dieses Problem wäre das Umschalten einer Klasse auf den Hauptteil beim Scrollen und das Targeting Ihrer scrollbaren Fenster. Wenn Sie .scrollA scrollen, schalten Sie die Klasse scrollB in body um und wenden etwas wie dieses Javascript/css an, oder Sie können alles mit Javascript tun, Ihrer Wahl.

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*/
}

Hoffe, das hilft dir, dich zu paaren!

0
Caleb Swank