Workaround for the disappearing header issue on old iOS versions

vaadin · Sep 22, 2020 · ed20cd2 · ed20cd2
1 parent 76c7949
commit ed20cd2
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 5 deletions.
diff --git a/src/vaadin-grid.html b/src/vaadin-grid.html
@@ -774,6 +774,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`);
+          }
+        }
       }
 
       /**

diff --git a/test/basic.html b/test/basic.html
@@ -352,13 +352,16 @@
             expect(grid.$.scroller.getBoundingClientRect().width).to.be.closeTo(300 - 2, 1);
           });
 
-          it('should have a visible header after row reorder', () => {
+          it('should have a visible header after row reorder', done => {
             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;
+            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)