diff --git a/src/vaadin-grid.html b/src/vaadin-grid.html
index 5532552ec..ff00e45b4 100644
--- 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
index fece0150e..a2692eb1e 100644
--- 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)