react-intersection-observer: Safari desktop triggers endless loop

Hi!

I’m using inView to detect if a container is in view, then setting this property to a secondary container that should be visible when the first one is out of view.

In Chrome this works fine, but in Safari I’m getting a endless loop of inView being toggled between true and false when my scroll position is at the edge of the intersection point.

navbar

Any help with this?

const [primaryContainerRef, inView] = useInView();

<div className="primary-container" ref={primaryContainerRef}>
       This is the primary container
</div>

<SecondaryContainer isVisible={!inView} />

const SecondaryContainer = ({ isVisible }) => {
   return (
      {isVisible && (
          <div className="secondary-container">This is the secondary container</div>
     )}
   )
};

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 8
Comments: 17 (7 by maintainers)

Commits related to this issue

bugfix: fix #303 (#306) — committed to thebuilder/react-intersection-observer by thebuilder 4 years ago
fix: don't clear the inView state if we get a node #308 — committed to thebuilder/react-intersection-observer by thebuilder 4 years ago
fix: don't clear the inView state if we get a node (#337) * fix: don't clear the inView state if we get a node #308 * fix: use a useEffect to trigger the cleanup — committed to thebuilder/react-intersection-observer by thebuilder 4 years ago

Most upvoted comments

@thebuilder here you go: https://codesandbox.io/s/react-intersection-observer-p9ide

So another observation as I was making this demo: the order on the DOM is relevant. In my example, the flickering occurs only when the observer element is inserted above the element it’s observing. So for anyone coming across this issue, potential solutions:

Make sure the observer element is loaded in an appropriate place in the DOM
If you are conditionally rendering the observer anyway, perhaps position: fixed is a better choice than position: sticky
If you aren’t conditionally rendering, then you may not even need an IntersectionObserver in the first place and can go ahead with position: sticky all by itself

Not sure if this is exactly what’s going on in the original post, but I hope this helps. 😃

valerie-roske on Jun 18, 2020

can confirm that 8.26.2 fixes the issue in chrome 80 (and 81)

macrozone on Apr 24, 2020

I also see a massive performance degeneration with chrome 80.

useInView seems to rerender every frame

macrozone on Apr 22, 2020