似乎Android Chrome有一个相当大的错误,有时地址栏隐藏/显示导致固定元素通过浏览器地址栏高度向下/向上移动其边界框.因此,元素在视觉上保持在同一位置,但边界框实际上会发生变化.这使得可点击区域无用,因为它们不再注册(参见下面的图像).
这个错误是间歇性的,但我已经能够通过快速滚动然后突然停止滚动触摸屏幕来非常可靠地复制它.有没有其他人遇到这个,更重要的是,有没有人有一个避免这种行为的解决方案?
在第一张图片中,请注意没有地址栏.向下滚动隐藏.边界框应该是它的位置.
现在使用地址栏,它会将整个边界框向下移动,在这种情况下会偏离视图.这使得按钮的命中区域变得无用.
谁能向我解释为什么设置观察单个元素的观察者会返回多个 IntersectionObserverEntry ?我在我的 Vue 项目中注意到了这一点,但它并不一致,而且似乎只出现在最新版本的 Chrome 中。
我希望我可以提供一个小提琴来复制这个问题,但我似乎无法复制它一定是与我的项目相关的东西。只是想知道是否有人可以为我指出正确的方向,解释为什么会发生这种情况。
这是我的 jsfiddle (即使它不显示此行为)
<div id="app">
<img :alt="x" v-for="x in 20" v-lazy="'https://picsum.photos/400/600/?random'"/>
</div>
function isObject (value) {
return value && typeof value === 'object' && value.constructor === Object;
}
function init (el, binding) {
let options = {
threshold: 0.10
}
let observer = new IntersectionObserver((entries) => {
console.log(el, entries)
if (entries[0].isIntersecting || entries[0].intersectionRatio > 0) {
// console.log('is intersecting', el)
// Create a new Image object
let img = new Image();
// …Run Code Online (Sandbox Code Playgroud)