vaadin
[grid] The sticky parts of grid render wrong on Safari (pre 14.1)
The position: sticky implementation on Safari has rendering issues that manifest with the <vaadin-grid>'s internal layout parts that rely on sticky positioning (header/footer/frozen columns).
We applied a change earlier that fixed a particular problem with the header disappearing on row reorder, but unfortunately, there are more related issues.
To reproduce:
- open https://vaadin.com/docs/latest/ds/components/grid/#column-freezing on Safari
- scroll the grid vertically and horizontally
- click somewhere in the grid body -> as the result, the sticky parts of the grid get rendered on wrong places
https://user-images.githubusercontent.com/1222264/121651023-d8752280-caa2-11eb-8b66-eecd8cb5fc0b.mp4
Some time ago we switched to extensively using sticky positioning due to the previous implementation no longer working on iOS 14. The new implementation is currently used in all supported Vaadin versions (14, 20, 21) so all of them are affected by the issue.
Solution proposal:
The position: sticky is needed in order to avoid jumpy appearance of header/frozen column while scrolling the grid. Since it's basically the same as position: relative with the sticky rendering effect, a potential fix to the problem would be to only use position: sticky while scrolling, and whenever not scrolling, fall back to using position: relative with transform: translate.
I couldn't reproduce the issue in Desktop Safari 14.1. Probably, the issue has been fixed there.
https://user-images.githubusercontent.com/5039436/121657979-93a0ba00-caa9-11eb-95d7-0539211b601b.mov
This issue can be reproduced in Safari 13.1 (only relevant for V14 at the moment). Related thread: https://vaadin.slack.com/archives/G6QQTHU8Z/p1623399149221600
