[Data Grid] Scrollbar is under table on mobile Safari

[federico-ntr]

Steps to reproduce

Link to live example: (required)

Steps:

1. Simply go to codesandbox template on a iOS browser
2. Try scrolling inside the grid (you may have to zoom in for the bug to be visible)

Current behavior

You will notice the bar is under the table. It is most noticeable when the scrollbar is on (under, actually) the dividers, or solid colors with full opacity:

I could not reproduce this issue on Chrome and Firefox for Android, nor using the DevTools mobile view. It seems to be iOS specific

Expected behavior

The scrollbar should go above the grid

Context

No response

Your environment

OS and browser info is not really relevant, since the issue targets iOS. By the way, iOS version is 17.0.2 on iPhone 15 Pro

npx @mui/envinfo

  System:
    OS: macOS 13.4.1
  Binaries:
    Node: 18.17.0 - ~/.nvm/versions/node/v18.17.0/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 9.6.7 - ~/.nvm/versions/node/v18.17.0/bin/npm
  Browsers:
    Chrome: 117.0.5938.132
    Edge: 117.0.2045.47
    Safari: 16.5.1
  npmPackages:
    @emotion/react: 11.11.1 => 11.11.1 
    @emotion/styled: 11.11.0 => 11.11.0 
    @mui/base:  5.0.0-beta.15 
    @mui/core-downloads-tracker:  5.14.9 
    @mui/icons-material: 5.14.9 => 5.14.9 
    @mui/lab: 5.0.0-alpha.144 => 5.0.0-alpha.144 
    @mui/material: 5.14.9 => 5.14.9 
    @mui/private-theming:  5.14.9 
    @mui/styled-engine:  5.14.9 
    @mui/system:  5.14.9 
    @mui/types:  7.2.4 
    @mui/utils:  5.14.9 
    @mui/x-data-grid: 6.15.0 => 6.15.0 
    @mui/x-date-pickers: 6.15.0 => 6.15.0 
    @mui/x-tree-view:  6.0.0-alpha.1 
    @types/react: 18.2.22 => 18.2.22 
    react: 18.2.0 => 18.2.0 
    react-dom: 18.2.0 => 18.2.0 
    typescript: 5.2.2 => 5.2.2

Search keywords: mobile safari scrollbar

[romgrk]

Might be solved by #10059.

[DanailH]

interestingly I wasn't able to reproduce it. @federico-ntr have you by any chance enabled the option for the scrollbars to aways be visible?

[federico-ntr]

No @DanailH, I have not. The bars are visible only while I scroll, if I stop they disappear after a while. Same thing also on MUI X docs examples.

Can I ask you how you tried to reproduce the issue? It's important to use a iOS device (I actually just reproduced the issue on iPadOS, so I guess it's a problem with WebKit on mobile devices). Chromium DevTools have a mobile view simulator with mobile-looking scrollbars, but it doesn't use WebKit. Safari's Responsive Design Mode shows desktop permanent scrollbars, but they actually warn you in their docs that macOS and iOS/iPadOS behave differently.

[DanailH]

I tested it on an iPhone 12 with IOS 16.7 on Safari.

[federico-ntr]

I just tested it on an iPhone 14 with iOS 16, just to make sure it's not a iOS 17-specific problem, and I was able to reproduce the issue.

I recorded a video which shows the issue:

RPReplay_Final1696515266.mov

Would you mind going to that page and recording the screen while doing the same things I do in the video? So we can see the difference.

PS: I had to reduce the quality to 720p in order to upload it here

[cherniavskii]

I can reproduce the issue on iOS 17

ios-scroll-issue.mov