search

Akryum / vue-observe-visibility

Detect when an element is becoming visible or hidden on the page.
https://jsfiddle.net/Akryum/ppt7endj/
1.65k stars 87 forks source link

BUG | sometimes onVisibilityChanged is called with wrong visibility value #225

Open NitzanShifrin opened 4 years ago

NitzanShifrin commented 4 years ago

While working I encountered a very weird bug, I get a visibility change event, but with the wrong value. Scrolling up and down the scroller, when having 1 object that I track visibility on, Sometimes I get false instead of true: this is my log visibility change true visibility change false visibility change true visibility change false visibility change false

How can this happened and is there anything to do to solve this?

And another unrelated question I have a < RecycleScroller ref="scroller">..

.. < /RecycleScroller>.. and in each of the myComponent, I have the vue-observe-visibility Any chance to track an item before it gets visible - like on the edge of the scrolling? couldn't make it work with rootMargin
velis74 commented 3 years ago

Not sure it's the same thing, but I found this issue while looking for a solution to a problem of my own:

I'm using this directive to detect visibility on a table row. It works just fine, except in the following case:

Render the page, scroll a few pages down (table has a few hundred rows) Reload the page (F5 or CTRL + F5) The page will be displayed already scrolled down with the row in question already in view

The onVisibilityChanged will be called with isVisible == false

Using Firefox 88.0.1. This is NOT a problem in Chromium.

Edit: As I found, the problem is just the opposite: FF was behaving correctly and Chrome was not. I was attaching the v-observe-visibility to the first row and that row was not in viewport on FF (and also in Chrome). But for some reason chrome still triggered the handler.