Not working with v-show

[pscs]

I couldn't get this to work if the component is being displayed using v-show.

After much debugging I found that the 'visibility listener' wasn't triggering when the component became visible.

After much more debugging (I didn't know how IntersectionObserver worked) I found that it appears that the 'root' option was causing the problem. The code has it set to 'document.documentElement', which you'd have thought would work, but actually seemed to be showing as an element of 0x0 pixels. Removing the 'root' option so that it became the default of the viewport made everything work correctly.

ie - changing

function listenToVisible(element, callback) {
const options = {
root: document.documentElement
};
.....

to

function listenToVisible(element, callback) {
const options = {
};
....

seems to have fixed the problem for me.

[pscs]

More Info - this is in Chrome v78

Changing root to "document.body" still doesn't fix the problem (again, the Observer's "root bounds" seem to be a 0x0 pixel area)

But changing it to "document.getElementById('App')" with the default Vue.js app template works (the root bounds are correctly set and it detects the component becoming visible)

[Ilya1vanov]

Same here