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

Question

Jun 08, 2016, 10:08 AM

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

Problema:

En iOS elz-index de un área desplazable se ignora cuando se usa-webkit-overflow-scrolling. Si dos objetos con-webkit-overflow-scrolling superponer el inferior se desplaza en lugar del que se muestra arriba.

Cómo reproducir:

Cree dos elementos superpuestos entre sí (conposition: absolute por ejemplo), uno de ellos tiene un mayorz-index y añadir

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

para usted<head>. Luego agrega la página a tu pantalla de inicio y ejecútala desde allí.

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

MCVE:

Alternativamente, solo echa un vistazoeste bolígrafo. Lanzar elcompleto versión desde su dispositivo iOS, agréguelo a su pantalla de inicio y ejecútelo desde allí.

Ambiente:

Probado eniphone 5 yiphone 6 coniOS 9.1 yiOS 9.3.2

Observaciones:El problema solo ocurre 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 se vuelve a cargar la página (¿quizás volver a activar el diseño lo solucionó?)Cambiar los elementos inferioresoverflow-y ahidden a través de JS soluciona el problema, sin embargo, alternaroverflow provoca un repintado que causa problemas de rendimientoQuitandoheight: 100%; width: 100% dehtml, body también 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 problemáticos. También se agradecería la explicación de por qué sucede esto.