Position arreglado en Chrome mobile que causa problemas al desplazarse
He estado investigando este problema durante la última hora y vi preguntas similares, pero no estoy seguro de que sean exactamente el mismo problema. Probablemente relacionado, de alguna manera, pero ninguna de las respuestas me ayudó a solucionar mi problema.
Tome el siguiente código:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html, body {
height: 100%;
margin: 0;
}
main {
background-color: orange;
height: 1500px;
margin: 50px;
}
footer {
background-color: green;
position: fixed;
height: 50px;
left: 100px;
right: 100px;
bottom: 100px;
}
</style>
</head>
<body>
<main></main>
<footer></footer>
</body>
</html>
Es difícil de depurar porque parece que no puedo reproducir el problema de manera consistente. Sigo desplazándome hacia arriba y hacia abajo, haciendo que la barra de direcciones en Chrome para Android se muestre y se oculte, eventualmente, algo así sucederá:
Por alguna razón, lafooter se está dibujando en el lugar correcto (como lo especifica el CSS), pero las herramientas de desarrollo de Chrome detectan el elemento en una posición diferente (no siempre como se muestra en la captura de pantalla).
¿Por qué es esto un problema
Supongo que tengo elementos seleccionables dentro defooter, el área en la que se puede hacer clic para esos elementos estará en el área "azul" detectada por las herramientas de desarrollo de Chrome y no donde se está dibujando el pie de página (el área verde), como debería ser porque eso es lo que el usuario está viendo.
¿Pensamientos?