From 08f0f44708ee4f8dbc214dca0078c78357a70921 Mon Sep 17 00:00:00 2001
From: Tomi Virkki <tomivirkki@users.noreply.github.com>
Date: Wed, 23 Sep 2020 14:15:50 +0300
Subject: [PATCH] fix: workaround a Safari sticky positioning issue with
 disappearing header (#1799)

---
 src/vaadin-grid-scroll-mixin.html |  8 ++++++++
 src/vaadin-grid.html              | 12 ++++++++++++
 test/basic.html                   | 12 ++++++++++++
 3 files changed, 32 insertions(+)

diff --git a/src/vaadin-grid-scroll-mixin.html b/src/vaadin-grid-scroll-mixin.html
index 8979927c8..d75ddf12b 100644
--- a/src/vaadin-grid-scroll-mixin.html
+++ b/src/vaadin-grid-scroll-mixin.html
@@ -301,6 +301,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);
+      }
     }
 
     _frozenCellsChanged() {
diff --git a/src/vaadin-grid.html b/src/vaadin-grid.html
index ed6c14362..50c84027b 100644
--- a/src/vaadin-grid.html
+++ b/src/vaadin-grid.html
@@ -733,6 +733,18 @@
             this.$.items.style.paddingBottom = `${this.$.footer.offsetHeight}px`;
           }
         }
+
+        if (this._ios) {
+          const isOldIOS = !window.CSS.supports('position', 'sticky');
+          if (isOldIOS) {
+            // Due to a rendering bug, the sticky header may disappear on an older iOS (10-12) Safari
+            // if the grid is used inside of a flex box. This is a workaround for the issue.
+            this.$.table.style.height = '';
+            this.$.table.style.minHeight = '100%';
+            this.$.table.style.maxHeight = '100%';
+            setTimeout(() => this.$.table.style.height = `${this.$.scroller.offsetHeight}px`);
+          }
+        }
       }
 
       _updateItem(row, item) {
diff --git a/test/basic.html b/test/basic.html
index 80c2b92b8..b85ccd1a5 100644
--- a/test/basic.html
+++ b/test/basic.html
@@ -352,6 +352,18 @@
             expect(grid.$.scroller.getBoundingClientRect().width).to.be.closeTo(300 - 2, 1);
           });
 
+          it('should have a visible header after row reorder', done => {
+            grid.querySelector('vaadin-grid-column').header = 'header';
+            grid.scrollToIndex(300);
+            setTimeout(() => {
+              flushGrid(grid);
+              const {left, top} = grid.getBoundingClientRect();
+              const cell = grid._cellFromPoint(left + 1, top + 1);
+              expect(grid.$.header.contains(cell)).to.be.true;
+              done();
+            });
+          });
+
           // 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);