[data-grid] Clicking header and scrolling causes headers to skew #4275
Description
Duplicates
- I have searched the existing issues
Latest version
- I have tested the latest version
Current behavior 😯
In a DataGrid with a somewhat large number of columns, if you scroll all the way to the right, click on a column header (not the menu or the sort icon, but the label), then scroll back left, all the column headers will be skewed left relative to their columns by a significant amount.
Expected behavior 🤔
The column headers should always stay aligned with their columns.
Steps to reproduce 🕹
Please see this CodeSandbox: https://codesandbox.io/s/nice-frost-gt209k?file=/src/App.js
Steps:
- Scroll all the way right.
- Click the label of the final column.
- Scroll back left all the way.
- Observe that the column headers have skewed left.
- If you can't see it at first, try adding a few more columns. It seems to be related to how much scrolling needs to be done, so it's related to both the number of columns and the width of the view.
Context 🔦
This is being used in a commercial product, where the users won't always see a large number of columns, but sometimes will. It is primarily a user experience issue.
Your environment 🌎
System:
OS: Linux 5.13 Ubuntu 20.04.4 LTS (Focal Fossa)
CPU: (4) x64 Intel(R) Core(TM) i9-10980HK CPU @ 2.40GHz
Memory: 1.50 GB / 15.63 GB
Container: Yes
Shell: 5.0.17 - /bin/bash
Managers:
Apt: 2.0.6 - /usr/bin/apt
Gradle: 6.8 - ~/.sdkman/candidates/gradle/current/bin/gradle
pip3: 20.3.3 - /usr/local/bin/pip3
Utilities:
Make: 4.2.1
GCC: 9.4.0
Git: 2.25.1
Servers:
Nginx: 1.18.0
Virtualization:
Docker: 20.10.13 - /usr/bin/docker
IDEs:
Nano: 4.8
Vim: 8.1
Languages:
Bash: 5.0.17 - /usr/bin/bash
Java: 11.0.14
Perl: 5.30.0 - /usr/bin/perl
Python3: 3.8.10
Databases:
MySQL: 10.3.34 (MariaDB) - /usr/bin/mysql
SQLite: 3.31.1 - /usr/bin/sqlite3
Browsers:
Chrome: 99.0.4844.82 -> This is the browser used.
Firefox: 98.0.1