Comcast / Comcast/react-data-grid
Vertical separators missing in header row.
- Dominant language
- TypeScript
- Stars
- 7.7k
- Forks
- 2.2k
- Avg merge
- 1d 2h
- Merged PRs (30d)
- 33
Description
## Describe the bug
Vertical separators are sometimes missing in header row, this is in chrome only.

## To Reproduce
1. In Chrome, shrink first few columns to their minimum size.
- The grid must still be wide enough to require horizontal scrolling.
2. Observe the missing header column borders.
## Expected behavior
Header separators should never disappear, no matter the zoom level, column sizes, or if horizontal scrolling is required.
## Link to Minimal Reproducible Example
https://adazzle.github.io/react-data-grid/#/CommonFeatures
## Environment
- `react-data-grid` version: 7.0.0-beta-52 and earlier.
- `react`/`react-dom` version: 19.1.0 and earlier.
## Additional context
Here's a screen recording of the behavior.
https://github.com/user-attachments/assets/d9708f67-7fdd-429d-9f29-d66235a9e6ca
I noticed this comment in the stylesheet
```css
.cj343x07-0-0-beta-52 {
@layer rdg.Cell {
/* max-content does not work with size containment
* dynamically switching between different containment styles incurs a heavy relayout penalty
* Chromium bug: at odd zoom levels or subpixel positioning,
* layout/paint/style containment can make cell borders disappear
* https://issues.chromium.org/issues/40840864
*/
position: relative; /* needed for absolute positioning to work */
padding-block: 0;
padding-inline: 8px;
border-inline-end: 1px solid var(--rdg-border-color);
border-block-end: 1px solid var(--rdg-border-color);
grid-row-start: var(--rdg-grid-row-start);
align-content: center;
background-color: inherit;
white-space: nowrap;
overflow: clip;
text-overflow: ellipsis;
outline: none;
&[aria-selected='true'] {
outline: 2px solid var(--rdg-selection-color);
outline-offset: -2px;
}
}
}
```
but this is occurring at 100% zoom.
Unfortunately, removing `contain: content` from the `rdg.Root` styles as the comment above would suggest, does not resolve the issue.
Removing `sticky` from the `rdg.HeaderRow` styles allows the `position: relative` in the `rdg.Cell` styles to be applied, fixing the issue, but losing sticky header columns not an acceptable workaround.
Contributor guide
Assessment
This issue has not been assessed yet.