react-intersection-observer

react-intersection-observer copied to clipboard

Description

Specifically when using Chrome on a Samsung Galaxy Tab 7 and setting threshold to 1, the useInView hook returns a value of inView that never changes to true when the element is fully scrolled into the viewport. Interestingly enough a value of 0.9 works just fine.

Steps to Reproduce

1. Use an useInView hook and provide { threshold: 1 } as an argument.
2. Using Chrome on a Samsung Galaxy Tab 7, scroll the element fully into the viewport

Expected Behavior

The inView value returned from the hook should be true

Observed Behavior

The inView value returned from the hook remains false

• useInView fork

Screenshots

Tablet

• Device: Samsung Galaxy Tab 7
• OS: Android
• Browser Chrome
• Version 95.0.4638.50

Additional Context

Interestingly enough a value of 0.9 works just fine.

Interesting. Question is if it's a problem with the Intersection Observer API itself, in that specific browser.

I just verified that Intersection Observer API itself works with threshold: 1 in that specific browser by loading this forked codepen example in the Samsung Galaxy Tab 7 Chrome browser via Browserstack.

Do you have time to debug this further?

• Is the observer correctly triggered? https://github.com/thebuilder/react-intersection-observer/blob/master/src/observe.ts#L58
• Is entry.isIntersecting set to true when intersecting?
• Is it something silly like the JS not doing the math correctly? So the entry.intersectionRatio >= threshold is evaluated as 1 >= 1 // false?

I attempted to debug by creating a local copy of the observe function in the fork and using a Samsung Galaxy Tab 7 via Browserstack to view the console output.

When options with threshold: 1 are provided, we see console output on mount as the observer is initialized, but no calls to the unobserve function, and no further console output when the observed element is scrolled into view. 🤔

Something that's worth noting is that a DOM exception seems to be thrown a few seconds after the page loads:

Uncaught DOMException: Failed to execute 'postMessage' on 'Worker': Data cannot be cloned, out of memory.
    at S (https://codesandbox.io/typescript-worker.d04a8b00.worker.js:1:796824)
    at https://codesandbox.io/typescript-worker.d04a8b00.worker.js:1:797128

I also tried using the IntersectionObserver API directly (with the forked codepen example from above) and checking that properties like intersectionRatio, isIntersecting, and isVisible exist on the entry when a threshold: 1 is used in that browser (they do, and are 1, true, and true respectively). 🤔

I attempted to debug by creating a local copy of the observe function in the fork and using a Samsung Galaxy Tab 7 via Browserstack to view the console output.

When options with threshold: 1 are provided, we see console output on mount as the observer is initialized, but no calls to the unobserve function, and no further console output when the observed element is scrolled into view. 🤔

Something that's worth noting is that a DOM exception seems to be thrown a few seconds after the page loads:

Uncaught DOMException: Failed to execute 'postMessage' on 'Worker': Data cannot be cloned, out of memory.
    at S (https://codesandbox.io/typescript-worker.d04a8b00.worker.js:1:796824)
    at https://codesandbox.io/typescript-worker.d04a8b00.worker.js:1:797128

This is really weird. It triggers the intersection observer when you resize the window, but not when scrolling. Since it's using the IntersectionObserver more or less directly, and it doesn't trigger the callback, it seems like it's a bug with the API itself?

Is this still an issue?