fix: configure ResizeObserver to observe entire border box (#10378)

Author: vursen

packages/component-base/src/virtualizer-iron-list-adapter.js

@@ -447,7 +447,7 @@ export class IronListAdapter {
     physicalItems.forEach((el) => {
       el.style.position = 'absolute';
       fragment.appendChild(el);
-      this.__resizeObserver.observe(el);
+      this.__resizeObserver.observe(el, { box: 'border-box' });
     });
     this.elementsContainer.appendChild(fragment);
     return physicalItems;

packages/component-base/test/virtualizer-item-height.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 { Virtualizer } from '../src/virtualizer.js';
 
@@ -413,6 +413,43 @@ describe('virtualizer - item height - lazy rendering', () => {
   });
 });
 
+describe('virtualizer - item padding', () => {
+  let virtualizer;
+  let scrollTarget;
+  let item0, item1;
+
+  beforeEach(async () => {
+    scrollTarget = fixtureSync(`
+      <div style="height: 200px;">
+        <div class="container"></div>
+      </div>
+    `);
+
+    virtualizer = new Virtualizer({
+      createElements: (count) => Array.from({ length: count }, () => document.createElement('div')),
+      updateElement: (el, index) => {
+        el.style.paddingBottom = '20px';
+        el.style.boxSizing = 'border-box';
+        el.id = `item-${index}`;
+      },
+      scrollTarget,
+      scrollContainer: scrollTarget.firstElementChild,
+    });
+    virtualizer.size = 2;
+    await nextResize(scrollTarget);
+    await nextFrame();
+  });
+
+  it('should adjust item positions after an item padding box changes', async () => {
+    item0 = document.querySelector('#item-0');
+    item1 = document.querySelector('#item-1');
+    item0.style.paddingBottom = '50px';
+    await nextResize(scrollTarget);
+    await nextFrame();
+    expect(item1.getBoundingClientRect().top).to.equal(item0.getBoundingClientRect().bottom);
+  });
+});
+
 describe('virtualizer - item height - placeholders are disabled', () => {
   let virtualizer;
   let scrollTarget;

packages/grid/src/vaadin-grid-row-details-mixin.js

@@ -68,10 +68,6 @@ export const RowDetailsMixin = (superClass) =>
         entries.forEach(({ target: cell }) => {
           this._updateDetailsCellHeight(cell.parentElement);
         });
-
-        // This workaround is needed until Safari also supports
-        // ResizeObserver.observe with {box: 'border-box'}
-        this.__virtualizer.__adapter._resizeHandler();
       });
     }