display: none causing errors

if i use this mixin in a component, and then put something like print_hidden from tailwindcss above or on that component, i get the following error:

TypeError: Failed to construct 'IntersectionObserver': The provided double value is non-finite.
    at VueComponent.addInViewportHandlers (index.js:526)
    at VueComponent.inViewportInit (index.js:514)
    at VueComponent.reInitInViewportMixin (index.js:509)
    at VueComponent.inViewportThresholdWithMax (index.js:500)
    at Watcher.run (commons.app.js:14062)
    at flushSchedulerQueue (commons.app.js:13804)
    at Array.<anonymous> (commons.app.js:11485)
    at flushCallbacks (commons.app.js:11411)

the line that triggers it:

      this.inViewportObserver = new IntersectionObserver(this.updateInViewport, {

[weotch]

Thanks for the suggestion @can-keklik, I released a fix as 2.0.2

[can-keklik]

It probably just needs an isFinite check. I’m not very familiar with CoffeeScript, so will try to demonstrate it on js:

https://github.com/BKWLD/vue-in-viewport-mixin/blob/74819bc85eccf1036294656f3c089159fe11c48f/index.js#L198

In some cases, the expression evaluates to NaN or Infinity.

For instance: Math.min(1, 0/0)

So that division should be checked like this:

var heightRatio = root.height / target.height;
if (Number.isFinite(heightRatio)) {
    this.inViewport.maxThreshold = Math.min(1, heightRatio); 
}
else {
    this.inViewport.maxThreshold = 1;
}

It worked for me, but you should do your own experiments of course.