vaadin
[Grid + Tree-Grid] Content of Grid and Tree-Grid is visible in the header when using Safari
Description
When scrolling the content of a Grid or a Tree-Grid in Safari the content is visible in the header (as there is a pixel space between the border and the header itself).
Expected outcome
The content should not be visible in the header.
Minimal reproducible example
https://vaadin.com/docs/latest/components/grid
https://vaadin.com/docs/latest/components/tree-grid
Steps to reproduce
- Open Safari
- Open the given documentation pages
- Scroll up and down and focus on the top of the grid / tree-grid
https://user-images.githubusercontent.com/60381251/185049296-6e849b13-c950-4609-b46c-0e4098612fe5.mov
https://user-images.githubusercontent.com/60381251/185049312-9216224e-e6b4-42d1-a963-986753cd1f82.mov
Environment
Vaadin version(s): 23.1.6 OS: macOS Monterey Version 12.5 (21G72) Browser: Safari Version 15.6 (17613.3.9.1.5)
Browsers
Safari
This happens only on high DPI (aka “retina”) screens. It’s not an issue on displays with less pixels, like my ancient Thunderbolt display. I assume it’s related to the subpixel display grid, how pixels are aligned to it, and especially elements that are on their own layer (transformed or position sticky/fixed).
Is there a way to fix it on my end ? or do I have to wait unti a new version of the grids is availible ? Thanks a lot for the fast reply.
Just out of curiousity, couldn't this behaviour happen in other components aswell ?
Create a vaadin-grid.css inside your theme's component folder and add the css provided by Jouni.
Oh, and notice that you should choose just one of the values fir the contain property, for example contain: paint.