fix: workaround an IE11 bug

vaadin · Dec 16, 2021 · 5edc53c · 5edc53c
1 parent c6cd586
commit 5edc53c
Showing 1 changed file with 11 additions and 7 deletions.
diff --git a/src/vaadin-grid-drag-and-drop-mixin.html b/src/vaadin-grid-drag-and-drop-mixin.html
@@ -303,13 +303,17 @@
 
       /** @private */
       __getViewportRows() {
-        const headerBottom = this.$.header.getBoundingClientRect().bottom;
-        const footerTop = this.$.footer.getBoundingClientRect().top;
-        return Array.from(this.$.items.children)
-          .filter(row => {
-            const rowRect = row.getBoundingClientRect();
-            return rowRect.bottom > headerBottom && rowRect.top < footerTop;
-          });
+        // Workaround an IE11 bug where the `getBoundingClientRect` for header/footer
+        // might return incorrect values
+        this.$.header.style.outline = '0px solid transparent';
+        const scrollerRect = this.$.scroller.getBoundingClientRect();
+        const headerBottom = Math.max(this.$.header.getBoundingClientRect().bottom, scrollerRect.top);
+        const footerTop = Math.min(this.$.footer.getBoundingClientRect().top, scrollerRect.bottom);
+
+        return Array.from(this.$.items.children).filter((row) => {
+          const rowRect = row.getBoundingClientRect();
+          return rowRect.bottom > headerBottom && rowRect.top < footerTop;
+        });
       }
 
       /** @protected */