search

David-Desmaisons / Vue.resize

Vue directive to detect resize events with deboucing and throttling capacity.
MIT License
326 stars 36 forks source link

Not working with v-show #17

Open pscs opened 4 years ago

pscs commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

Same here