Skip to content

[DataGrid] Fix scrollbars not showing up on scroll on iOS#22832

Merged
cherniavskii merged 14 commits into
mui:masterfrom
cherniavskii:fix-scrollbars-iOS
Jun 18, 2026
Merged

[DataGrid] Fix scrollbars not showing up on scroll on iOS#22832
cherniavskii merged 14 commits into
mui:masterfrom
cherniavskii:fix-scrollbars-iOS

Conversation

@cherniavskii

@cherniavskii cherniavskii commented Jun 16, 2026 •
edited
Loading

Copy link
Copy Markdown
Member

@cherniavskii cherniavskii added type: bug It doesn't behave as expected. scope: data grid Changes related to the data grid. needs cherry-pick The PR should be cherry-picked to master after merge. v8.x labels Jun 16, 2026
@cherniavskii cherniavskii changed the title add isIOS platform detection [DataGrid] Fix scrollbars not showing up on scroll on iOS Jun 16, 2026
@code-infra-dashboard

code-infra-dashboard Bot commented Jun 16, 2026 •
edited
Loading

Copy link
Copy Markdown

Deploy preview

https://deploy-preview-22832--material-ui-x.netlify.app/

Bundle size

Bundle Parsed size Gzip size
@mui/x-data-grid 🔺+137B(+0.03%) 🔺+50B(+0.04%)
@mui/x-data-grid-pro 🔺+141B(+0.03%) 🔺+52B(+0.03%)
@mui/x-data-grid-premium 🔺+141B(+0.02%) 🔺+54B(+0.03%)
@mui/x-charts 0B(0.00%) 0B(0.00%)
@mui/x-charts-pro 0B(0.00%) 0B(0.00%)
@mui/x-charts-premium 0B(0.00%) 0B(0.00%)
@mui/x-date-pickers 0B(0.00%) 0B(0.00%)
@mui/x-date-pickers-pro 0B(0.00%) 0B(0.00%)
@mui/x-tree-view 0B(0.00%) 0B(0.00%)
@mui/x-tree-view-pro 0B(0.00%) 0B(0.00%)
@mui/x-license 0B(0.00%) 0B(0.00%)

Details of bundle changes

Check out the code infra dashboard for more information about this PR.

@cherniavskii
cherniavskii marked this pull request as ready for review June 16, 2026 20:33
@cherniavskii
cherniavskii requested a review from romgrk as a code owner June 16, 2026 20:33
Copilot AI review requested due to automatic review settings June 16, 2026 20:33
Copilot AI reviewed Jun 16, 2026
View reviewed changes

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Not ready to approve

iOS-specific styling is baked into styled() at module init, which can cause SSR/client hydration className mismatches on iOS.

Pull request overview

This PR addresses iOS-specific scrollbar visibility in the Data Grid virtual scroller by swapping from the grid’s virtual scrollbars to the native scroller scrollbars on iOS, based on new platform detection utilities in @mui/x-internals.

Changes:

  • Added iOS platform detection (isIOS) to @mui/x-internals/platform, including iPadOS 13+ disambiguation via maxTouchPoints.
  • Updated GridVirtualScroller to show native scrollbars on iOS while keeping them hidden elsewhere.
  • Updated GridVirtualScrollbar to hide the virtual scrollbar UI on iOS to avoid duplicate thumbs.
File summaries
File Description
packages/x-internals/src/platform/shared.ts Adds normalized navigator reads (SSR-safe fallbacks) for platform/UA/touch points.
packages/x-internals/src/platform/index.ts Introduces isIOS export using normalized platform/touch-point data.
packages/x-data-grid/src/components/virtualization/GridVirtualScroller.tsx Enables native scroller scrollbars on iOS via conditional scrollbar styling.
packages/x-data-grid/src/components/virtualization/GridVirtualScrollbar.tsx Hides virtual scrollbar on iOS to prevent duplicate scrollbar thumbs.

Copilot's findings

  • Files reviewed: 4/4 changed files
  • Comments generated: 3

Note

Your feedback helps us improve the quality of this feature.
Please use 👍 or 👎 to tell us whether this assessment is correct.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment thread packages/x-internals/src/platform/index.ts Outdated
Comment thread packages/x-data-grid/src/components/virtualization/GridVirtualScroller.tsx Outdated
Comment thread packages/x-data-grid/src/components/virtualization/GridVirtualScrollbar.tsx
@cherniavskii
cherniavskii requested review from arminmeh and Copilot June 17, 2026 19:22
Copilot AI reviewed Jun 17, 2026
View reviewed changes

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Not ready to approve

The new SSR hydration test currently bypasses fail-on-console behavior but does not fail on non-hydration console errors, which can mask real regressions.

Copilot's findings
  • Files reviewed: 4/4 changed files
  • Comments generated: 2

Note

Your feedback helps us improve the quality of this feature.
Please use 👍 or 👎 to tell us whether this assessment is correct.

Comment thread packages/x-internals/src/platform/index.ts Outdated
Comment thread packages/x-data-grid/src/tests/ssr.DataGrid.test.tsx
arminmeh
arminmeh approved these changes Jun 18, 2026
View reviewed changes

@arminmeh arminmeh left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks fine, but I didn't do the test on the actual device.

Comment thread packages/x-internals/src/platform/index.ts Outdated
@cherniavskii

cherniavskii commented Jun 18, 2026

Copy link
Copy Markdown
Member Author

@arminmeh BTW, do scrollbars work fine on Android? Would be great to double check.

@arminmeh

arminmeh commented Jun 18, 2026

Copy link
Copy Markdown
Contributor

@arminmeh BTW, do scrollbars work fine on Android? Would be great to double check.

Android remained unchanged

@cherniavskii

cherniavskii commented Jun 18, 2026

Copy link
Copy Markdown
Member Author

Android remained unchanged

Unchanged meaning "scrollbars show up on scroll"? 😅

@arminmeh

arminmeh commented Jun 18, 2026

Copy link
Copy Markdown
Contributor

Unchanged meaning "scrollbars show up on scroll"? 😅

Haha, yes

@cherniavskii cherniavskii mentioned this pull request Jun 18, 2026
Merged
1 task
@cherniavskii
cherniavskii merged commit 6ead29c into mui:master Jun 18, 2026
21 checks passed
@github-actions

github-actions Bot commented Jun 18, 2026

Copy link
Copy Markdown
Contributor

Cherry-pick PRs will be created targeting branches: v8.x

@cherniavskii
cherniavskii deleted the fix-scrollbars-iOS branch June 18, 2026 12:20
@github-actions github-actions Bot mentioned this pull request Jun 18, 2026
Merged
mbrookes pushed a commit to mbrookes/mui-x that referenced this pull request Jun 27, 2026
@cherniavskii
[DataGrid] Fix scrollbars not showing up on scroll on iOS (mui#22832)
0b14ad7
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

Copilot code review Copilot Copilot left review comments
@arminmeh arminmeh arminmeh approved these changes
@romgrk romgrk Awaiting requested review from romgrk romgrk is a code owner

Assignees

No one assigned

Labels

needs cherry-pick The PR should be cherry-picked to master after merge. scope: data grid Changes related to the data grid. type: bug It doesn't behave as expected. v8.x

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

[data grid] Scrollbar not visible on iOS

3 participants

@cherniavskii @arminmeh