From 72396eec1b04a2f8a889e08077dee1e900308f5a Mon Sep 17 00:00:00 2001 From: web-padawan Date: Thu, 30 Jan 2025 16:32:39 +0200 Subject: [PATCH] fix: use the most recent IntersectionObserver entry in form-layout --- packages/form-layout/src/vaadin-form-layout-mixin.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/form-layout/src/vaadin-form-layout-mixin.js b/packages/form-layout/src/vaadin-form-layout-mixin.js index 536687a97c..7bdd1fd083 100644 --- a/packages/form-layout/src/vaadin-form-layout-mixin.js +++ b/packages/form-layout/src/vaadin-form-layout-mixin.js @@ -124,7 +124,12 @@ export const FormLayoutMixin = (superClass) => // Ensure there is a child text node in the style element this._styleElement.textContent = ' '; - this.__intersectionObserver = new IntersectionObserver(([entry]) => { + this.__intersectionObserver = new IntersectionObserver((entries) => { + // If the browser is busy (e.g. due to slow rendering), multiple entries can + // be queued and then passed to the callback invocation at once. Make sure we + // use the most recent entry to detect whether the layout is visible or not. + // See https://github.com/vaadin/web-components/issues/8564 + const entry = [...entries].pop(); if (!entry.isIntersecting) { // Prevent possible jump when layout becomes visible this.$.layout.style.opacity = 0;