fix: use the most recent IntersectionObserver entry in form-layout (#…

…8596) (#8612)

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;