Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

display: none causing errors

See original GitHub issue

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 (
    at flushSchedulerQueue (
    at Array.<anonymous> (
    at flushCallbacks (

the line that triggers it:

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

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Reactions:4
  • Comments:6 (1 by maintainers)

github_iconTop GitHub Comments

weotchcommented, Feb 19, 2021

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

can-keklikcommented, Feb 19, 2021

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

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

html - CSS - display: none; not working - Stack Overflow
CSS - display: none; not working · 1. is that in a media query? Have you tried using a more specific selector or...
Read more >
CSS 'display: none' causes problems for screenreaders
The issue is that using CSS 'display:none', will actually hide the content contained in the <div> that the declaration is attached to from...
Read more >
display NONE not working - possible conflict on stylesheet?
I see NO syntax or other quirky errors, and i have now read thru every line 5 times. my editor picks up no...
Read more >
display - CSS: Cascading Style Sheets - MDN Web Docs
Using a display value of none on an element will remove it from the accessibility tree. This will cause the element and all...
Read more >
125 (Nested in display:none gives width()/height()=0) – jQuery
If #outer is display:block then #inner returns width()==10. It looks like (in IE6/FF at least) any display:none parent causes width()/height() to return 0....
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found