fix: workaround a Safari sticky positioning issue with disappearing h…

…eader

src/vaadin-grid-scroll-mixin.html

@@ -321,6 +321,14 @@
           body.insertBefore(items[i], items[0]);
         }
       }
+
+      // Due to a rendering bug, reordering the rows can make the sticky header disappear on Safari
+      // if the grid is used inside of a flex box. This is a workaround for the issue.
+      if (this._safari) {
+        const {transform} = this.$.header.style;
+        this.$.header.style.transform = '';
+        setTimeout(() => this.$.header.style.transform = transform);
+      }
     }
 
     /** @protected */

test/basic.html

@@ -352,6 +352,15 @@
             expect(grid.$.scroller.getBoundingClientRect().width).to.be.closeTo(300 - 2, 1);
           });
 
+          it('should have a visible header after row reorder', () => {
+            grid.querySelector('vaadin-grid-column').header = 'header';
+            grid.scrollToIndex(300);
+            flushGrid(grid);
+            const {left, top} = grid.getBoundingClientRect();
+            const cell = grid._cellFromPoint(left + 1, top + 1);
+            expect(grid.$.header.contains(cell)).to.be.true;
+          });
+
           // Skip this test on iOS 10 since there Safari has a bug that makes this fail (works in iOS 9, 11 and 12)
           (/iPhone OS 10_/.test(navigator.userAgent) ? it.skip : it)('should stretch height', () => {
             expect(grid.getBoundingClientRect().height).to.be.closeTo(200, 1);