diff --git a/src/vaadin-grid.html b/src/vaadin-grid.html index 5532552ec..08bca77ea 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.height = `${this.$.scroller.offsetHeight}px`; + this.$.table.style.minHeight = '100%'; + this.$.table.style.maxHeight = '100%'; + } + } } /**