не существует на настольных версиях.

ледовал эту проблему в течение последнего часа и видел похожие вопросы, но я не уверен, что это точно такая же проблема. Возможно, как-то связано, но ни один из ответов не помог мне исправить мою проблему.

Возьмите следующий код:

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

Это трудно отладить, потому что я не могу воспроизвести проблему последовательно. Я продолжаю прокручивать вверх и вниз - заставляя адресную строку в Chrome для Android показывать и скрывать - со временем произойдет нечто подобное:

По какой-то причинеfooter рисуется в правильном месте (как указано в CSS), но инструменты Chrome dev обнаруживают элемент в другом положении (не всегда, как показано на скриншоте).

Почему это проблема?

Предположим, у меня есть кликабельные элементы внутриfooterинтерактивная область для этих элементов будет находиться в «синей» области, обнаруженной инструментами Chrome dev, а не там, где фактически рисуется нижний колонтитул (зеленая область), как и должно быть, потому что это то, что видит пользователь.

Мысли?

Ответы на вопрос(1)

Ваш ответ на вопрос