固定在Chrome mobile上的位置,滚动时会导致问题

在过去的一个小时里,我一直在研究这个问题,看到了类似的问题,但我不确定它们是否是同一个问题。可能有某种关联,但没有一个答案能帮助我解决问题。

采用以下代码:

<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开发工具会在不同的位置检测元素(并不总是像屏幕截图所示)。

为什么这是一个问题?

假设里面有可点击的元素 页脚 ,这些元素的可单击区域将位于Chrome开发工具检测到的“蓝色”区域,而不是实际绘制页脚的位置(绿色区域),因为这是用户看到的。

有什么想法?