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.

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>
     )}
   )
};

[valerie-roske]

@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. 😃

[macrozone]

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