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

soat7uwm  于 2023-06-19  发布在  Go
关注(0)|答案(3)|浏览(145)

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

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

现在使用地址栏,它将整个边界框向下移动,在本例中为视图。这使得按钮的命中区域无用。

vc9ivgsu

vc9ivgsu1#

我记得面临过类似的问题,就我所记得的具有position:fixed的元素而言,它们也需要这个:

transform: translate3d(0,0,0);

就是最后这样的东西

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

ymzxtsji2#

添加带有位置的空div:固定在页面上。这解决了这个问题,因为Chrome做了一些魔术,并考虑了调整大小和定位。

j13ufse2

j13ufse23#

只有你需要添加

body{
 padding-bottom: 52px;
}

相关问题