Android Chrome 浏览器地址栏位移导致固定元素无法点击

Question

似乎 Android Chrome 存在一个严重的 bug，有时隐藏/显示地址栏会导致固定元素将其边界框向下或向上移动浏览器地址栏高度。因此，元素在视觉上停留在同一位置，但边界框实际上发生了移动。这使得可点击区域无法注册（请参见下面的图像）。

这个 bug 是间歇性的，但我已经可以通过快速滚动并突然停止滚动后触摸屏幕来相当可靠地复制它。还有其他人遇到过这个问题吗？更重要的是，有没有避免这种情况的解决方案？

在第一张图片中，请注意没有地址栏。它被向下滚动隐藏。边界框在应该的位置。

现在有了地址栏，它会将整个边界框向下移动，在这种情况下超出视野范围。这使得按钮的点击区域变得无用。

- James

---

我认为这是有意设计的: https://developers.google.com/web/updates/2016/12/url-bar-resizing - Tiberiu Maxim

不，这是一个漏洞，导致固定定位元素的点击区域发生偏移。Chrome团队已在最近的版本中解决了此问题。https://bugs.chromium.org/p/chromium/issues/detail?id=848122 - James

你是正确的。你也可能想在这里看一下 https://css-tricks.com/the-trick-to-viewport-units-on-mobile/。 - Tiberiu Maxim

Answer 1

我记得曾经遇到过类似的问题，据我所记，具有position:fixed属性的元素也需要这样做：

transform: translate3d(0,0,0);

那就是，最终的结果类似于这样。

element {
    transform: translate3d(0px, 0px, 0px);
    position: fixed;
    top: 0;
}

- Serg Bakay

---

这在我的情况下对问题没有任何影响。我没有投反对票，因为可能是我的问题，或者我的情况略有不同。 - Alverstone

这对我也不起作用。 - Lucas D

Answer 2

在页面中添加一个带有 position: fixed 的空 div。这样就可以解决问题，因为 Chrome 会进行一些神奇的调整，以适应重设大小和定位。

- northendben

Answer 3

你只需要添加

body{
 padding-bottom: 52px;
}

- Alejandro Reyes