6

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

采取以下代码：

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

想法？

4

1 回答 1

0

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

非工作解决方案

我可能刚刚找到了解决这个 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>

于 2018-06-21T14:33:04.597 回答