Vertical separators missing in header row.

[jlanning-gl]

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.

20250421-1920-07.5811536.mp4

I noticed this comment in the stylesheet

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

[amanmahajan7]

Thank you for reporting the issue. There is already an issue opened

#3751

[jlanning-gl]

My apologies. I did see this other issue but figured they were different because that one referenced horizontal dividers in row data, whereas I was pointing out missing vertical dividers between headers.

I've messed around all day trying to resolve this, if I manage to get it I'll open a PR that references the other issue, hopefully we can kill two birds with one stone here.

Thank you for your work on this wonderful library, cheers!

[amanmahajan7]

No worries. I think all the border issues are probably related. We will investigate on our end.

[amanmahajan7]

#3751 (comment)