scrolling index html ios css scroll z-index

html - index - webkit-overflow-scrolling



iOS no respeta el índice z con-webkit-overflow-scrolling (3)

Problema:

En iOS, el z-index de un área desplazable se ignora al usar -webkit-overflow-scrolling . Si dos objetos con -webkit-overflow-scrolling superponen, el inferior se desplaza en lugar del que se muestra arriba.

Cómo reproducir:

Cree dos elementos superpuestos entre sí (con position: absolute por ejemplo), uno de ellos con un z-index más alto y agregue

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

a los dos Ambos elementos deben tener suficiente contenido para ser desplazables.

Además agregar

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

a su <head> . Luego agrega la página a tu pantalla de inicio y ábrela desde allí.

Si luego intenta desplazar el elemento superior, el elemento debajo se desplaza en su lugar.

MCVE:

Alternativamente, simplemente echa un vistazo a esta pluma . Inicie la versión full desde su dispositivo iOS, agréguela a su pantalla de inicio y ejecútela desde allí.

Ambiente:

Probado en iPhone 5 y iPhone 6 con iOS 9.1 y iOS 9.3.2

Observaciones:

  • El problema solo se produce al iniciar la página / aplicación desde la pantalla de inicio (aplicación anclada) o dentro de una vista web de Xamarin (podría tener algo que ver con UIWebView y WKWebView)
  • Después de cambiar la orientación del dispositivo (vertical / horizontal) después de cargar la página, el problema se soluciona hasta que la página se vuelve a cargar (¿es posible que se vuelva a activar el diseño?)
  • Cambiar el overflow-y elementos inferiores a hidden través de JS soluciona el problema, sin embargo, el overflow conmutación provoca un repintado que causa problemas de rendimiento
  • Eliminando height: 100%; width: 100% height: 100%; width: 100% de html, body soluciona el problema, sin embargo, deben configurarse para que los valores porcentuales funcionen correctamente

Se necesita una solución / solución adecuada para solucionar este problema sin causar efectos secundarios molestos. También se agradecería la explicación de por qué sucede esto.

Esencialmente, lo que estás experimentando es un error de iOS con -webkit-overflow-scrolling: touch; . Para resolver este error, según esta respuesta , simplemente agregue los siguientes estilos CSS a la división desplazable:

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

En resumen, si agrega los estilos anteriores a los estilos para la clase scrollable en su CSS, debería funcionar. Probado en un iPhone 5s con iOS 9. Tenga en cuenta que si se desplaza hacia abajo hasta la parte superior o inferior de la sección desplazable que está por encima de todo lo demás, comenzará a desplazarse por el cuerpo.

Creo que lo que hacen esos estilos adicionales es engañar al iPhone para que use la GPU, pero recuerda que solo son necesarios debido a un error en Safari: no es tu culpa y estos estilos adicionales no deberían incluirse. ¡Pero insértalos en tu CSS y debería funcionar como un sueño!

Una solución realmente fácil para esto sería cambiar una clase al cuerpo en el desplazamiento y apuntar a sus ventanas desplazables. Si está desplazando .scrollA, entonces cambie la clase scrollB al cuerpo y aplique algo como este Javascript / css o podría hacerlo todo con javascript, su elección.

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

Espero que esto te ayude a aparearte!