Comcast / Comcast/react-data-grid

Vertical separators missing in header row.

Open
#3,767 4 comments 0 reactions 0 assignees View on GitHub
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.

![Image](https://github.com/user-attachments/assets/c04a5ee2-6c9b-4b57-b1ee-d33659b9c4e2)

## 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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.