固定在Chrome移动设备上的位置，导致滚动时出现问题
Ric*_*ral 5 css css-position chrome-for-android
在过去的一个小时中，我一直在研究此问题，并且看到了类似的问题，但是我不确定它们是否完全相同。某种程度上可能相关，但是没有一个答案可以帮助我解决问题。
采取以下代码：
<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 for Android上的地址栏显示和隐藏-最终，将发生以下情况：
由于某种原因，footer绘制位置正确（由CSS指定），但是Chrome开发人员工具会在不同位置检测元素（并非总是如屏幕快照所示）。
为什么这是个问题？
假设我内部有可点击的元素footer，这些元素的可点击区域将在Chrome开发者工具检测到的“蓝色”区域中，而不是页脚实际绘制的位置（绿色区域），因为它应该是用户所在的位置看到。
有什么想法吗？
编辑：我将下面的代码留在这里，但我发现它没有按我的预期工作。它在我最初的测试中确实有效，但我们的质量检查发现它实际上并没有解决我们遇到的问题。目前，据我所知，没有解决方法，我们需要等待 Chromium 团队最终解决该问题。
不起作用的解决方案
我可能刚刚找到了解决这个 Chromium bug 的方法。
我正在运行最新 Chrome 的 Pixel 2 上对此进行测试，不确定它对于低端设备的效果如何。它有点难看，但似乎对我有用。
我所做的就是在事件中用其自身替换有问题的元素（强制浏览器重新布局）touchend。这是完美的，因为该问题仅存在于移动设备上，touchend不存在于桌面版本上。
const body = document.getElementsByTagName('body');
const button = document.getElementsByTagName('button');
const footer = document.getElementsByTagName('footer');
function randomColor() {
button[0].style.backgroundColor =
`hsla(${Math.random() * 360}, 100%, 50%, 1)`;
}
window.addEventListener('touchend', function() {
body[0].replaceChild(footer[0], footer[0]);
}, false);* {
box-sizing: border-box;
}
html,
body {
height: 100%;
margin: 0;
}
main {
background-color: orange;
height: 3000px;
margin: 10px;
}
footer {
border: 2px solid green;
background-color: greenyellow;
display: flex;
justify-content: center;
align-items: center;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
height: 100px;
}
button {
border: 2px solid black;
background-color: white;
cursor: pointer;
width: 50%;
height: 70%;
}<main></main>
<footer>
<button onclick="randomColor()">CLICK ME!</button>
</footer>