refactor: avoid forced reflows during OverflowController initialization (#11400)

## Summary

This PR refactors OverflowController to separate DOM reads and writes:
reads happen in the ResizeObserver callback, while writes are deferred
to a requestAnimationFrame callback. This avoids forced reflows when
multiple components or different parts of the same component are reading
and writing the DOM during initialization.

Grid initial render with Aura:

| Before | After |
|:-------:|:-------:|
| ![Screenshot 2026-03-23 at 11 55
32](https://github.com/user-attachments/assets/500fdf83-0272-426a-b7c1-7e94cf551e92)
| ![Screenshot 2026-03-23 at 11 55
44](https://github.com/user-attachments/assets/26416487-5b30-4e23-8ee6-0ec529e7e421)
|
| Rendering: ~333 ms | Rendering: ~304 ms |

Author: vursen

packages/component-base/src/overflow-controller.js

@@ -3,8 +3,6 @@
  * Copyright (c) 2021 - 2026 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { animationFrame } from './async.js';
-import { Debouncer } from './debounce.js';
 
 /**
  * A controller that detects if content inside the element overflows its scrolling viewport,
@@ -48,12 +46,7 @@ export class OverflowController {
   observe() {
     const { host } = this;
 
-    this.__resizeObserver = new ResizeObserver(() => {
-      this.__debounceOverflow = Debouncer.debounce(this.__debounceOverflow, animationFrame, () => {
-        this.__updateOverflow();
-      });
-    });
-
+    this.__resizeObserver = new ResizeObserver(() => this.__onResize());
     this.__resizeObserver.observe(host);
 
     // Observe initial children
@@ -74,26 +67,43 @@ export class OverflowController {
             this.__resizeObserver.unobserve(node);
           }
         });
-      });
 
-      this.__updateOverflow();
+        if (addedNodes.length === 0 && removedNodes.length > 0) {
+          this.__updateState({ sync: true });
+        }
+      });
     });
 
     this.__childObserver.observe(host, { childList: true });
 
     // Update overflow attribute on scroll
     this.scrollTarget.addEventListener('scroll', this.__boundOnScroll);
+  }
 
-    this.__updateOverflow();
+  /** @private */
+  __onResize() {
+    this.__updateState({ sync: false });
   }
 
   /** @private */
   __onScroll() {
-    this.__updateOverflow();
+    this.__updateState({ sync: true });
   }
 
   /** @private */
-  __updateOverflow() {
+  __updateState({ sync }) {
+    cancelAnimationFrame(this.__resizeRaf);
+
+    const state = this.__readState();
+    if (sync) {
+      this.__writeState(state);
+    } else {
+      this.__resizeRaf = requestAnimationFrame(() => this.__writeState(state));
+    }
+  }
+
+  /** @private */
+  __readState() {
     const target = this.scrollTarget;
 
     let overflow = '';
@@ -115,10 +125,14 @@ export class OverflowController {
       overflow += ' end';
     }
 
-    overflow = overflow.trim();
-    if (overflow.length > 0 && this.host.getAttribute('overflow') !== overflow) {
+    return { overflow: overflow.trim() };
+  }
+
+  /** @private */
+  __writeState({ overflow }) {
+    if (overflow) {
       this.host.setAttribute('overflow', overflow);
-    } else if (overflow.length === 0 && this.host.hasAttribute('overflow')) {
+    } else {
       this.host.removeAttribute('overflow');
     }
   }

packages/grid/test/scrolling-mode.test.js

@@ -7,7 +7,7 @@ import { flushGrid, infiniteDataProvider, scrollToEnd } from './helpers.js';
 describe('scrolling mode', () => {
   let grid;
 
-  beforeEach(() => {
+  beforeEach(async () => {
     grid = fixtureSync(`
       <vaadin-grid style="width: 50px; height: 400px;" size="1000">
         <vaadin-grid-column></vaadin-grid-column>
@@ -18,6 +18,7 @@ describe('scrolling mode', () => {
     };
     grid.dataProvider = infiniteDataProvider;
     flushGrid(grid);
+    await nextFrame();
   });
 
   it('should not throw on table wheel', () => {

packages/scroller/test/scroller.test.js

@@ -1,6 +1,6 @@
 import { expect } from '@vaadin/chai-plugins';
 import { sendKeys } from '@vaadin/test-runner-commands';
-import { fixtureSync, nextFrame, nextRender, nextUpdate } from '@vaadin/testing-helpers';
+import { fixtureSync, nextFrame, nextRender, nextResize, nextUpdate } from '@vaadin/testing-helpers';
 import '../src/vaadin-scroller.js';
 
 describe('vaadin-scroller', () => {
@@ -98,6 +98,7 @@ describe('vaadin-scroller', () => {
         scroller.appendChild(div);
 
         await nextRender();
+        await nextResize(scroller);
       });
 
       it('should set overflow attribute to "end" when scroll is at the beginning', () => {
@@ -128,6 +129,7 @@ describe('vaadin-scroller', () => {
       div.innerHTML = '<div style="font-size: 1.25em;">Long<br>text<br>that<br>has<br>many<br>lines</div>';
       scroller.appendChild(div);
 
+      await nextResize(scroller);
       await nextRender();
     });
 

packages/tabsheet/test/tabsheet.test.js

@@ -1,5 +1,5 @@
 import { expect } from '@vaadin/chai-plugins';
-import { aTimeout, fixtureSync, nextFrame } from '@vaadin/testing-helpers';
+import { aTimeout, fixtureSync, nextFrame, nextResize } from '@vaadin/testing-helpers';
 import sinon from 'sinon';
 import '../src/vaadin-tabsheet.js';
 
@@ -306,6 +306,7 @@ describe('tabsheet', () => {
       tabsheet.style.maxHeight = `${tabsheet.offsetHeight - 10}px`;
       scrollTarget = tabsheet.shadowRoot.querySelector('[part~="content"]');
 
+      await nextResize(tabsheet);
       await nextFrame();
     });
 

packages/virtual-list/test/virtual-list.test.js

@@ -1,12 +1,13 @@
 import { expect } from '@vaadin/chai-plugins';
-import { fixtureSync, nextFrame } from '@vaadin/testing-helpers';
+import { fixtureSync, nextFrame, nextResize } from '@vaadin/testing-helpers';
 import '../src/vaadin-virtual-list.js';
 
 describe('virtual-list', () => {
   let list;
 
   beforeEach(async () => {
     list = fixtureSync(`<vaadin-virtual-list></vaadin-virtual-list>`);
+    await nextResize(list);
     await nextFrame();
   });
 
@@ -54,6 +55,7 @@ describe('virtual-list', () => {
         el.textContent = model.item.value;
       };
 
+      await nextResize(list);
       await nextFrame();
     });