fix: prevent IntersectionObserver infinite loop in observeMove (#10099) (#10102)

vaadin-bot · web-padawan · web-flow · commit 3f5c7c72c612 · 2025-08-28T13:48:18.000+03:00
Co-authored-by: Serhii Kulykov &lt;iamkulykov@gmail.com&gt;
diff --git a/packages/overlay/src/vaadin-overlay-utils.js b/packages/overlay/src/vaadin-overlay-utils.js
@@ -16,10 +16,12 @@
  */
 export function observeMove(element, callback) {
   let io = null;
+  let timeout;
 
   const root = document.documentElement;
 
   function cleanup() {
+    timeout && clearTimeout(timeout);
     io && io.disconnect();
     io = null;
   }
@@ -52,27 +54,22 @@ export function observeMove(element, callback) {
     let isFirstUpdate = true;
 
     function handleObserve(entries) {
-      let ratio = entries[0].intersectionRatio;
+      const ratio = entries[0].intersectionRatio;
 
       if (ratio !== threshold) {
         if (!isFirstUpdate) {
           return refresh();
         }
 
-        // It's possible for the watched element to not be at perfect 1.0 visibility when we create
-        // the IntersectionObserver. This has a couple of causes:
-        //   - elements being on partial pixels
-        //   - elements being hidden offscreen (e.g., <html> has `overflow: hidden`)
-        //   - delays: if your DOM change occurs due to e.g., page resize, you can see elements
-        //     behind their actual position
-        //
-        // In all of these cases, refresh but with this lower ratio of threshold. When the element
-        // moves beneath _that_ new value, the user will get notified.
-        if (ratio === 0.0) {
-          ratio = 0.0000001; // Just needs to be non-zero
+        if (!ratio) {
+          // If the reference is clipped, the ratio is 0. Throttle the refresh
+          // to prevent an infinite loop of updates.
+          timeout = setTimeout(() => {
+            refresh(false, 1e-7);
+          }, 1000);
+        } else {
+          refresh(false, ratio);
         }
-
-        refresh(false, ratio);
       }
 
       isFirstUpdate = false;
diff --git a/packages/overlay/test/position-mixin-listeners.test.js b/packages/overlay/test/position-mixin-listeners.test.js
@@ -190,11 +190,15 @@ describe('position mixin listeners', () => {
     });
 
     it('should update position on target move by changing style', async () => {
+      overlay.noVerticalOverlap = true;
+      await nextFrame();
+
       target.style.position = 'static';
       await nextFrame();
+      await nextFrame();
       updatePositionSpy.resetHistory();
 
-      target.marginTop = '20px';
+      target.style.marginTop = '20px';
       // Wait for intersection observer
       await nextFrame();
       await nextFrame();
@@ -209,7 +213,7 @@ describe('position mixin listeners', () => {
 
       overlay.opened = false;
 
-      target.marginTop = '20px';
+      target.style.marginTop = '20px';
       await nextFrame();
       await nextFrame();
       expect(updatePositionSpy.called).to.be.false;
