固定在Chrome移动设备上的位置，导致滚动时出现问题 [英] Position fixed on Chrome mobile causing issues when scrolling
问题描述
过去一个小时，我一直在研究此问题，并且看到了类似的问题，但我不确定它们是否完全相同。可能以某种方式相关，但是没有一个答案可以帮助我解决问题。
I've been researching this issue for the past hour and saw similar questions but I'm not sure they are the same exact problem. Probably related, somehow, but none of the answers helped me fixed my issue.
采用以下代码：
<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>
这很难调试，因为我似乎无法始终如一地重现该问题。我一直在上下滚动-在Android版Chrome浏览器上显示和隐藏地址栏-最终，将发生以下情况：
This hard to debug because I can't seem to reproduce the problem consistently. I keep scrolling up and down - making the address bar on Chrome for Android show and hide - eventually, something like this will happen:
由于某种原因，页脚的绘制位置正确（由CSS指定） ），但Chrome开发人员工具会在不同位置检测元素（并非总是如屏幕截图所示）。
For some reason, the footer is being drawn in the correct place (as specified by the CSS), but Chrome dev tools detect the element in a different position (not always like the screenshot shows).
为什么会出现问题？
假设我在页脚中有可点击的元素，这些元素的可点击区域将在蓝色区域中被Chrome开发人员工具检测到，而不是实际绘制页脚的位置（绿色区域），因为它应该是用户所看到的。
Assume I have clickable elements inside footer, the clickable area for those elements will be in the "blue" area detected by Chrome dev tools and not where the footer is actually being drawn (the green area), as it should because that's what the user is seeing.
有什么想法？
推荐答案
编辑：我要保留代码此处为低，但我发现它没有按预期工作。在我的初始测试中它确实起作用了，但是我们的质量检查发现，它实际上并没有解决我们遇到的问题。目前，我还没有解决方法，我们需要等待Chromium团队修复。
I'm leaving the code below here but I found out it's not working as I expected it. It did work during my initial testing but our QA found out that it didn't actually solve the issue we were having. Right now, there's no workaround that I'm aware and we need to wait for the Chromium team to fix the issue on their end.
非工作解决方案
我可能刚刚找到了解决此Chromium错误的方法。
I might just have found a workaround for this Chromium bug.
我正在运行最新版Chrome的Pixel 2上对此进行测试它对低端设备的效果如何。
I'm testing this on a Pixel 2 running the latest Chrome, not sure how nice it will work for lower end devices. It's a bit ugly but it seems to work for me.
我所做的是在<$ c上用本身替换了有问题的元素（强制浏览器重新布局）。 $ c> touchend 事件。这是完美的，因为问题仅存在于移动设备上，而 touchend 在桌面版本上不存在。
What I did was replace the offending element with itself (forcing a browser re-layout) on the touchend event. This is perfect because the problem only exists on mobile and touchend does not exist on desktop versions.
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>
这篇关于固定在Chrome移动设备上的位置，导致滚动时出现问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
