固定位置在 Chrome 移动设备上导致滚动时出现问题答案

【问题标题】：Position fixed on Chrome mobile causing issues when scrolling固定位置在 Chrome 移动设备上导致滚动时出现问题
【发布时间】：2018-11-27 13:54:24
【问题描述】：

过去一个小时我一直在研究这个问题并看到了类似的问题，但我不确定它们是否是完全相同的问题。不知何故，可能相关，但没有一个答案能帮助我解决我的问题。

取以下代码：

<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 上的地址栏显示和隐藏 - 最终，会发生这样的事情：

由于某种原因，footer 被绘制在正确的位置（由 CSS 指定），但 Chrome 开发工具会检测到不同位置的元素（并不总是像屏幕截图所示）。

为什么会出现这个问题？

假设我在footer 中有可点击元素，这些元素的可点击区域将位于 Chrome 开发工具检测到的“蓝色”区域，而不是实际绘制页脚的位置（绿色区域），因为它应该因为这就是用户所看到的。

想法？

【问题讨论】：

我建议在头部包含一个“视口元标记”，以便将页面正确缩放到移动设备。然后我会删除 1500px 高度值并将其设置为 'min-height: 100%;'
@doppler 标签已经有了，1500px是用来模拟内容的。
我也有这个问题，你可以在这里找到我的 SO 帖子 stackoverflow.com/questions/50938106/… 并且我也将它作为一个错误报告给 Chromium 在这里 bugs.chromium.org/p/chromium/issues/… 也许加入错误报告以帮助获得它注意到了。这绝对是一个浏览器错误，它似乎只发生在 Android 上。
@RicardoAmaral 遗憾的是没有。因为它是由浏览器地址栏隐藏/显示引起的，并且只影响固定定位的元素，我认为没有任何可能的解决方法 - 如果这是一个选项，则栏切换到 position: absolute 或锁定视口，以便地址栏永远不会隐藏.
唯一可靠的解决方法是防止 Chrome 隐藏地址。它可以按照以下 StackOverflow 文章中的描述实现：stackoverflow.com/questions/18061308/…

标签： css css-position chrome-for-android

【解决方案1】：

编辑：我将下面的代码留在这里，但我发现它没有按预期工作。它在我最初的测试期间确实有效，但我们的 QA 发现它实际上并没有解决我们遇到的问题。目前，我知道没有解决方法，我们需要等待 Chromium 团队修复他们的 issue。

无效的解决方案

我可能刚刚找到了解决这个 Chromium 错误的方法。

我正在运行最新版 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>

【讨论】：