iOS no respeta el índice z con -webkit-overflow-scrolling
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.
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 correctamenteSe 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.