web-dev-qa-db-fra.com

iOS ne respecte pas z-index avec -webkit-overflow-scrolling

Problème:

Sur iOS, le z-index d'une zone défilable est ignoré lors de l'utilisation de -webkit-overflow-scrolling. Si deux objets avec -webkit-overflow-scrolling se chevauchent, l'objet inférieur défile au lieu de celui affiché ci-dessus.

Comment reproduire:

Créez deux éléments qui se superposent (avec position: absolute par exemple), l’un d’eux ayant un z-index supérieur et ajoutez

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

à tous les deux. Les deux éléments doivent avoir suffisamment de contenu pour pouvoir défiler.

Ajouter en plus 

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

à votre <head>. Ajoutez ensuite la page à votre écran d’accueil et lancez-la à partir de là.

Si vous essayez ensuite de faire défiler l'élément supérieur, l'élément en dessous défile à la place.

MCVE:

Alternativement, vérifiez ce stylo. Lancez la version complète à partir de votre appareil iOS, ajoutez-la à votre écran d'accueil et lancez-la à partir de cet appareil.

Environnement:

Testé sur iPhone 5 _ et iPhone 6 avec iOS 9.1 et iOS 9.3.2

Observations:

  • Le problème ne survient que lors du lancement de la page/application à partir de l'écran d'accueil (application épinglée) ou à l'intérieur d'une vue Web Xamarin (cela peut avoir un rapport avec UIWebView et WKWebView).
  • Après avoir modifié l'orientation du périphérique (portrait/paysage) après le chargement de la page, le problème est résolu jusqu'à ce que la page soit rechargée (peut-être qu'un nouveau déclenchement de la présentation l'a corrigé?)
  • Le fait de changer les éléments inférieurs overflow-y en hidden via JS résout le problème, mais le basculement de overflow provoque un repeinte causant des problèmes de performances.
  • La suppression de height: 100%; width: 100% de html, body résout également le problème, mais ceux-ci doivent être définis pour que les valeurs de pourcentage fonctionnent correctement.

Nécessaire est une solution/solution de contournement appropriée pour résoudre ce problème sans provoquer d'effets secondaires gênants. Une explication de la raison pour laquelle cela se produit serait également appréciée.

htmlioscssscrollz-index
19
Aides

Essentiellement, vous rencontrez un bogue iOS avec -webkit-overflow-scrolling: touch;. Afin de résoudre ce problème, comme indiqué dans cette réponse , ajoutez simplement les styles CSS suivants à la variable div:

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

Donc dans l'ensemble, si vous ajoutez les styles ci-dessus aux styles de la classe scrollable dans votre CSS, cela devrait fonctionner. Testé sur un iPhone 5 équipé d'iOS 9. Notez que si vous faites défiler l'écran en haut ou en bas de la section déroulante située au-dessus de tout le reste, le corps du texte défilera.

Je pense que ces styles supplémentaires incitent l'iPhone à utiliser le processeur graphique, mais rappelez-vous qu'ils ne sont nécessaires qu'en raison d'un bogue avec Safari - ce n'est pas votre faute et ces styles supplémentaires ne devraient pas vraiment être inclus. Mais insérez-les dans votre CSS et cela devrait fonctionner comme un rêve!

7
Isaac Adni

En supposant que vous rencontrez le problème comme eux. S'il vous plaît, jetez un oeil à ces post:

J'espère que cette aide!

1
Đông An

Une solution très simple consiste à basculer une classe vers le corps lors du défilement et à cibler vos fenêtres défilantes. Si vous faites défiler .scrollA, basculez la classe scrollB en corps et appliquez quelque chose comme ce code Javascript/css ou vous pouvez tout faire en 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*/
}

J'espère que cela vous aide mate!

0
Caleb Swank