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

标签 javascript html css google-chrome android-chrome

似乎 Android Chrome 有一个相当大的错误,有时地址栏隐藏/显示会导致固定元素将其边界框向下/向上移动浏览器的地址栏高度。所以元素在视觉上停留在同一个位置,然而,边界框实际上发生了变化。这会使可点击区域变得无用,因为它们不再注册(见下图)。
该错误是间歇性的,但我已经能够通过快速滚动然后突然停止滚动触摸屏幕来非常可靠地复制它。有没有其他人遇到过这种情况,更重要的是,有没有人有避免这种行为的解决方案?
在第一张图片中,请注意没有地址栏。它通过向下滚动隐藏。边界框是它应该在的地方。

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

最佳答案

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

transform: translate3d(0,0,0);
也就是最后是这样的
element {
    transform: translate3d(0px, 0px, 0px);
    position: fixed;
    top: 0;
}

关于javascript - Android Chrome 浏览器地址栏移动固定元素命中区域,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50938106/

相关文章:

javascript - chrome.webRequest.onBeforeRequest 仅重定向最后一个 URL

javascript - jQuery 删除 "#"之后的部分字符串并也删除 "# "

php - 问题添加联系表 7

javascript - 如何检查 SVG 中是否缺少 css 类?

javascript - 如何清除 react native webview cookies?

javascript - 发出关闭消息框 cookie

html - CSS 边框混合/透明度

html - 如何在 html 电子邮件中的 Outlook 2007、2010、2013 上使用“不显示”

android - 响应式 Bootstrap 问题

css - IE9 对 CSS 有文件大小限制吗?