Column headers become unaligned with their respective columns after sorting/ordering

[ceoshikhar]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

When I click on a column header to perform server side sorting/ordering, the column headers shift to left and become unaligned with their respective columns.

Even some of the column headers leave the DataGrid component and go left off of it. You can notice that the first time I clicked on it, it didn't misalign but the second time when I scrolled and came back to it, it did this unexpected behaviour.

This is not a consistent bug. I also notice that columns headers sometimes are delayed(little behind/ahead than their respective column) when I scroll left-right. I don't know if that's noticeable in the video attached but it feels like it when viewed live in the browser.

I have also noticed that after we reach this stage(unaligned as shown in the video) if you again scroll left-right, it sometimes resets the column header and they realign correctly with their respective columns.

Screen.Recording.2022-02-22.at.4.20.43.PM.mov

Expected behavior 🤔

The column header to stay aligned with their respective columns when I perform server side ordering/sorting when I click on it.

Steps to reproduce 🕹

I don't have steps to reproduce at the moment but I will try to create one ASAP. Right now I have this screen recording.

I have done the usual stuff, define columns, and do some server side pagination and sorting. It's official work so i can't share the code snippet, hence I will try to recreate this bug in a codesanbox or something when I can.

Context 🔦

No response

Your environment 🌎

`npx @mui/envinfo`

Browser: Google Chrome 98.0.4758.102 (Official Build) (arm64) 
System:
    OS: Linux 4.18 Rocky Linux 8.5 (Green Obsidian)
    CPU: (4) x64 Intel(R) Xeon(R) CPU @ 2.80GHz
    Memory: 431.83 MB / 15.46 GB
    Container: Yes
    Shell: 4.4.20 - /bin/bash
  Binaries:
    Node: 12.22.5 - /usr/bin/node
    npm: 6.14.15 - ~/Cetec-ERP/node_modules/.bin/npm
  Managers:
    Cargo: 1.58.0 - ~/.cargo/bin/cargo
    pip2: 9.0.3 - /usr/bin/pip2
    pip3: 9.0.3 - /usr/bin/pip3
    Yum: 4.7.0 - /usr/bin/yum
  Utilities:
    Make: 4.2.1 - /usr/bin/make
    GCC: 8.5.0 - /usr/bin/gcc
    Git: 2.27.0 - /usr/bin/git
  Servers:
    Nginx: 1.14.1 - /usr/sbin/nginx
  IDEs:
    Vim: 8.0 - /usr/bin/vim
  Languages:
    Bash: 4.4.20 - /usr/bin/bash
    Go: 1.17.3 - /usr/local/go/bin/go
    Perl: 5.28.2 - /opt/perl5/perls/perl-5.28.2/bin/perl
    Python3: 3.6.8 - /usr/bin/python3
    Rust: 1.58.0 - /home/shikhar/.cargo/bin/rustc
  Databases:
    MySQL: 10.6.7 (MariaDB) - /usr/bin/mysql

Order ID 💳 (optional)

No response

[ceoshikhar]

You can notice in this attached video that it feels like column headers are "free" and not "glued" to their respective columns. They feel to be lagging during the scroll and take a little bit extra time to align with their columns.

I don't know it this is an expected behaviour or not. I think maybe this lagging is related to column header becoming unaligned after sorting/ordering.

Screen.Recording.2022-02-22.at.6.03.17.PM.mov

[flaviendelangle]

Duplicates #3890

We are investigating to find the root cause of the issue.