Posição corrigida no Chrome para dispositivos móveis, causando problemas ao rolar

Question

Jun 18, 2018, 06:52 PM

Posição corrigida no Chrome para dispositivos móveis, causando problemas ao rolar

Pesquisei esse problema há uma hora e vi perguntas semelhantes, mas não tenho certeza de que sejam o mesmo problema exato. Provavelmente relacionado, de alguma forma, mas nenhuma das respostas me ajudou a resolver meu problema.

Pegue o seguinte 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>

Isso é difícil de depurar porque não consigo reproduzir o problema de forma consistente. Continuo rolando para cima e para baixo - exibindo e ocultando a barra de endereços no Chrome para Android - eventualmente, algo como isso acontecerá:

Por alguma razão, ofooter está sendo desenhado no local correto (conforme especificado pelo CSS), mas as ferramentas de desenvolvimento do Chrome detectam o elemento em uma posição diferente (nem sempre como mostra a captura de tela).

Por que isso é um problema?

Suponha que eu tenha elementos clicáveis dentrofooter, a área clicável para esses elementos estará na área "azul" detectada pelas ferramentas de desenvolvimento do Chrome e não onde o rodapé está sendo desenhado (a área verde), como deveria, porque é isso que o usuário está vendo.

Pensamentos?