From c5edaa8236012cb039f8374a955fb1f620e8a93c Mon Sep 17 00:00:00 2001 From: Serhii Kulykov Date: Fri, 31 Jan 2025 11:29:30 +0200 Subject: [PATCH] fix: use the most recent IntersectionObserver entry in form-layout (#8596) --- packages/form-layout/src/vaadin-form-layout.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/form-layout/src/vaadin-form-layout.js b/packages/form-layout/src/vaadin-form-layout.js index 45e728275e2..faef8e4ea0f 100644 --- a/packages/form-layout/src/vaadin-form-layout.js +++ b/packages/form-layout/src/vaadin-form-layout.js @@ -272,7 +272,12 @@ class FormLayout extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement)) constructor() { super(); - 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;