[data grid] Grid constantly updating a columns width which causes "flickering"

[dil-abokor]

Steps to reproduce

Steps:

1. Open this link to live example This is the official Docs page.
2. Reduce the width of the window, and at one point, the Grid starts to "shake".

Current behavior

Screen.Recording.2025-01-14.at.15.18.16.mov

It happens with Chrome and Firefox too.

Expected behavior

The Grid changes it's layout when we're resizing the window and stays in that state.

Context

I think it is only happening when the Grid uses flex column widths.
As you can see on the video, the "Column menu" cell keeps changing between being in one line or two.
If I inspect the DOM, a div with class MuiDataGrid-scrollbarFiller MuiDataGrid-scrollbarFiller-borderTop keeps appearing and disappearing.

Your environment

It is happening with all recent versions locally, and on the Docs page it happens when switching it to v8 alpha as well.

npx @mui/envinfo

  System:
    OS: macOS 14.7.1
  Binaries:
    Node: 20.10.0 - ~/.nvm/versions/node/v20.10.0/bin/node
    npm: 10.2.3 - ~/.nvm/versions/node/v20.10.0/bin/npm
    pnpm: 9.12.3 - ~/.nvm/versions/node/v20.10.0/bin/pnpm
  Browsers:
    Chrome: 131.0.6778.265
    Edge: 131.0.2903.147
    Safari: 17.6
  npmPackages:
    @emotion/react:  11.13.0 
    @emotion/styled:  11.13.0 
    @mui/icons-material: ^5.16.11 => 5.16.11 
    @mui/material: ^5.16.11 => 5.16.11 
    @mui/x-data-grid-pro: 7.19.0 => 7.19.0 
    react:  18.2.0 
    react-dom:  18.2.0 

Search keywords: data grid, layout, width, flickering

[michelengelen]

This only happens on the docs page, so it is most probably unrelated to any grid specific feature. @KenanYusuf could you have a look?

[dil-abokor]

I was able to reproduce this locally as well. And it was also raised by our QA.

I think it is related to the maxHeight behaviour when the column widths are fluid, and the column height is "auto".

[michelengelen]

@dil-abokor we recently deprecated autoHeight on the datagrid (#14614) ... if you encountered this in your app could you please provide a reproduction in code? This would help us a lot in finding the bug

[dil-abokor]

I managed to reproduce it here:
https://codesandbox.io/p/sandbox/7myvqw?file=%2Fsrc%2FApp.js

EDIT: This shows the bug for me in Chorme and Edge but not in Firefox. If it looks perfect, try modifying the width of the container slightly. Until the first cells content doesn't fit in one line.

[dil-abokor]

Screen.Recording.2025-01-15.at.15.55.30.mov

[lauri865]

I can't reproduce it, but curious if #15627 would fix it, as I removed the possibility for recursively updating viewport inner size in that PR that seems to have been the cause for similar issues that have so far been fixed with pixel rounding.

[lauri865]

@dil-abokor, can you reproduce it here still? https://deploy-preview-15627--material-ui-x.netlify.app/x/react-data-grid/demo/

[dil-abokor]

Yes, I can reproduce it on this url as well

Screen.Recording.2025-01-17.at.08.25.59.mov

[KenanYusuf]

@dil-abokor are you able to reproduce it on this demo? I've removed maxHeight from the <DataGrid /> and applied a flex layout to the parent.

https://codesandbox.io/p/sandbox/16170-auto-height-flickering-pldl3f

[dil-abokor]

Yes, it is still happening

[KenanYusuf]

Ok thanks @dil-abokor. Just to be sure it's related to the auto row height feature, if you comment out getRowHeight={() => "auto"}, it no longer flickers?

[dil-abokor]

Exactly. If I comment it out, it doesn't happen.

[lauri865]

Think it's fixed here now?
https://deploy-preview-15627--material-ui-x.netlify.app/x/react-data-grid/demo/

Steps to reproduce:

1. On OSX make sure scrollbars are set to always visible in system settings, under Appearance
2. Resize window so that HTML width is around 1058px

Reproducible here: https://next.mui.com/x/react-data-grid/demo/
Can't reproduce in the above deploy anymore

[dil-abokor]

@lauri865 I opened both links within the same browser and same width, and you're right, it is not flickering and I can't make it produce the bug anymore.

[lauri865]

#15648 also fixes it now that I think about it, but in a better way. Removes another source of dimension recursion that doesn't require rounding pixels.

https://deploy-preview-15648--material-ui-x.netlify.app/x/react-data-grid/demo/

Combination of both of the PRs should improve resize and mount performance (under some circumstances at least).

[dil-abokor]

#15648 also fixes it now that I think about it, but in a better way. Removes another source of dimension recursion that doesn't require rounding pixels.

https://deploy-preview-15648--material-ui-x.netlify.app/x/react-data-grid/demo/

I can confirm, it is working fine on this preview too.