Question

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

请使用以下代码：

<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开发工具检测到的“蓝色”区域，而不是实际绘制页脚的位置（绿色区域），如它应该是因为这是用户所看到的。

思想？

Answer 1

编辑：我在这里留下了下面的代码，但发现它没有按预期运行。在我最初的测试期间它确实起作用了，但是我们的质量保证发现它实际上并没有解决我们遇到的问题。目前，我知道尚没有解决方法，我们需要等待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>

固定在Chrome移动设备上的位置会在滚动时导致问题

1 个答案: