Android Chrome 浏览器地址栏移动固定元素命中区域

Posted 2023-02-21

【中文标题】Android Chrome 浏览器地址栏移动固定元素命中区域

【英文标题】：Android Chrome browser address bar shifts fixed element hitareas

【发布时间】：2018-11-28 23:45:48

【问题描述】：

android Chrome 似乎有一个相当大的错误，有时地址栏隐藏/显示会导致固定元素将其边界框向下/向上移动浏览器的地址栏高度。所以元素在视觉上停留在同一个位置，然而，边界框实际上发生了变化。这会使可点击区域变得无用，因为它们不再注册（见下图）。

该错误是间歇性的，但我已经能够通过快速滚动然后突然停止滚动触摸屏幕来非常可靠地复制它。有没有其他人遇到过这种情况，更重要的是，有没有人有避免这种行为的解决方案？

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

现在使用地址栏，它会将整个边界框向下移动，在这种情况下不可见。这会使按钮的点击区域变得无用。

【问题讨论】：

我认为这是有意的：developers.google.com/web/updates/2016/12/url-bar-resizing

没有。这是一个改变固定位置物品的命中区域的错误。 Chrome 团队在最近的版本中解决了这个问题。 bugs.chromium.org/p/chromium/issues/detail?id=848122

你是对的。您可能还想看看这里css-tricks.com/the-trick-to-viewport-units-on-mobile

【参考方案1】：

只有你需要添加

body
 padding-bottom: 52px;

【参考方案2】：

我记得遇到过类似的问题，据我记得有 position:fixed 的元素，他们也需要这个：

transform: translate3d(0,0,0);

也就是最后是这样的

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