motiondivision / motion

A modern animation library for React and JavaScript
https://motion.dev
MIT License
25.85k stars 849 forks source link

[BUG] IntersectionObserver not triggering in Chrome with Reorder component #2679

Open bodymovin opened 6 months ago

bodymovin commented 6 months ago

2. Describe the bug

This only happens in Chrome. Using the Reorder component, if an element is being observed by an IntersectionObserver, it triggers the callback only once passing the entry's "isIntersecting" value to false. But it never calls the observer callback a second time passing "isIntersecting" as true.

3. IMPORTANT: Provide a CodeSandbox reproduction of the bug

https://codesandbox.io/p/sandbox/framer-motion-intersection-observer-j5ms4h?file=%2Fsrc%2FApp.js%3A16%2C27-16%2C41

4. Steps to reproduce

Steps to reproduce the behavior:

  1. Open Chrome dev tools to see the logs
  2. Drag item "Test 5" from the list from its position and drop it above item "Test 2"
  3. wait for a second and notice in the dev tools that the element still logs as not visible after 1 second and after 4 seconds.

This doesn't happen every time, so refresh the sandbox and try again if it doesn't trigger after the first drag. It happens quite often, so after 4 or 5 attempts, it should display this behavior.

5. Expected behavior

If the Reorder component hides the element or moves it outside the viewport, once it brings it back, it should trigger the intersection observer a second time.

7. Environment details

This happens only in Chrome. Safari and Firefox don't display this behavior. I'm pretty certain the cause of the problem is Chrome and not framer-motion directly, but I'm interested in knowing what is causing this.