[Table] Vertical White Lines Between Headers With A Background Color When StickyHeader Is Used

by ADMIN 95 views

Introduction

When using the stickyHeader prop in a table with a background color for the header cells, vertical white lines may appear randomly between headers. This issue is specific to the latest versions of Chrome and Edge, while Firefox seems to be unaffected. In this article, we will explore the steps to reproduce this issue, the current behavior, and a proposed solution to resolve the problem.

Steps to Reproduce

To reproduce this issue, follow these steps:

  1. Open the live example provided in the link: https://codesandbox.io/embed/fmypwn?module=%2Fsrc%2FDemo.tsx
  2. Use the latest version of Chrome (134.0.6998.89) or Edge (134.0.3124.51)
  3. Notice the white line on the left of the 'Density' column. If it doesn't show up for you, try changing the size of the preview tab by dragging the middle part. You should at least see flashes of white lines at random places between headers.

Current Behavior

The current behavior is that vertical white lines pop up randomly between headers when stickyHeader is used and there is a background color for the header cells. These lines can change depending on the size of the screen and the content of the table.

Image

Image

Image

Solution

To resolve this issue, you can try the following solutions:

  1. Remove the stickyHeader prop: If you don't need the sticky header functionality, you can simply remove the stickyHeader prop from your table component.
  2. Add custom styles to the thead component: Instead of using the stickyHeader prop, you can add the following custom styles to the thead component:
position: sticky;
top: 0px;
z-index: 2;

This will achieve the same effect as the stickyHeader prop without causing the vertical white lines to appear.

Expected Behavior

The expected behavior is that white lines between headers should not pop up randomly when stickyHeader is used.

Context

Unfortunately, there is no additional context provided for this issue.

Your Environment

Here is the environment information for the issue:

npx @mui/envinfo 
  System:
    OS: Windows 11 10.0.26100
  Binaries:
    Node: 22.14.0 - ~\AppData\Local\fnm_multishells\25772_1741759258364\node.EXE
    npm: 11.1.0 - ~\AppData\Local\fnm_multishells\25772_1741759258364\npm.CMD
    pnpm: Not Found
  Browsers:
    Chrome: Chromium (134.0.6998.89)
    Edge: Chromium (134.0.3124.51)
  npmPackages:
    @emotion/react: ^11.14.0 => 11.14.0
    @emotion/styled: ^11.14.0 => 11.14.0
    @mui/core-downloads-tracker:  6.4.7
    @mui/icons-material: ^6.4.7 => 6.4.7
    @mui/material: ^6.4.7 => 6.4.7
    @mui/private-theming:  6.4.6
    @mui/styled-engine:  6.4.6
    @mui/system:  6.4.7
    @mui/types:  7.2.21
    @mui/utils:  6.4.6
    @mui/x-date-pickers: ^7.27.3 => 7.27.3
    @mui/x-internals:  7.26.0
    @types/react: ^18.3.18 => 18.3.18
    react: ^18.3.1 => 18.3.1
    react-dom: ^18.3.1 => 18.3.1
    typescript: ^5.8.2 => 5.8.2

Q: What is the issue with vertical white lines between headers?

A: The issue is that vertical white lines may appear randomly between headers when stickyHeader is used and there is a background color for the header cells. This issue is specific to the latest versions of Chrome and Edge, while Firefox seems to be unaffected.

Q: Why is this issue only happening in Chrome and Edge?

A: The issue is likely due to a bug in the latest versions of Chrome and Edge. Firefox seems to be handling the stickyHeader prop correctly, which is why the issue is not present in Firefox.

Q: How can I reproduce this issue?

A: To reproduce this issue, follow these steps:

  1. Open the live example provided in the link: https://codesandbox.io/embed/fmypwn?module=%2Fsrc%2FDemo.tsx
  2. Use the latest version of Chrome (134.0.6998.89) or Edge (134.0.3124.51)
  3. Notice the white line on the left of the 'Density' column. If it doesn't show up for you, try changing the size of the preview tab by dragging the middle part. You should at least see flashes of white lines at random places between headers.

Q: What is the expected behavior?

A: The expected behavior is that white lines between headers should not pop up randomly when stickyHeader is used.

Q: How can I resolve this issue?

A: To resolve this issue, you can try the following solutions:

  1. Remove the stickyHeader prop: If you don't need the sticky header functionality, you can simply remove the stickyHeader prop from your table component.
  2. Add custom styles to the thead component: Instead of using the stickyHeader prop, you can add the following custom styles to the thead component:
position: sticky;
top: 0px;
z-index: 2;

This will achieve the same effect as the stickyHeader prop without causing the vertical white lines to appear.

Q: Is this issue specific to my laptop model?

A: No, this issue is not specific to your laptop model. It was also noticed by another developer in our team with a different laptop.

Q: What is the environment information for this issue?

A: Here is the environment information for the issue:

npx @mui/envinfo 
  System:
    OS: Windows 11 10.0.26100
  Binaries:
    Node: 22.14.0 - ~\AppData\Local\fnm_multishells\25772_1741759258364\node.EXE
    npm: 11.1.0 - ~\AppData\Local\fnm_multishells\25772_1741759258364\npm.CMD
    pnpm: Not Found
  Browsers:
    Chrome: Chromium (134.0.6998.89)
    Edge: Chromium (134.0.3124.51)
  npmPackages:
    @emotion/react: ^11.14.0 => 11.14.0
    @emotion/styled: ^11.14.0 => 11.14.0
    @mui/core-downloads-tracker:  6.4.7
    @mui/icons-material: ^6.4.7 => 6.4.7
    @mui/material: ^6.4.7 => 6.4.7
    @mui/private-theming:  6.4.6
    @mui/styled-engine:  6.4.6
    @mui/system:  6.4.7
    @mui/types:  7.2.21
    @mui/utils:  6.4.6
    @mui/x-date-pickers: ^7.27.3 => 7.27.3
    @mui/x-internals:  7.26.0
    @types/react: ^18.3.18 => 18.3.18
    react: ^18.3.1 => 18.3.1
    react-dom: ^18.3.1 => 18.3.1
    typescript: ^5.8.2 => 5.8.2

Q: What are the search keywords for this issue?

A: The search keywords for this issue are: table, white lines, stickyHeader.