[list] Sticky subheader overlaps scrollbar on iOS (all major browsers)

[functoria]

Steps to reproduce

Steps:
On any iOS 18.0.1+ browser

1. Open this link to live example: (official List demo page)
2. Scroll the sticky sub-header list
3. Notice the list sub-headers overlapping the scrollbar

Current behavior

List sub-headers are overlapping the list scrollbar (overlay)

Expected behavior

List scrollbar stays "above" list content

Context

• https://stackoverflow.com/questions/67076468/why-scrollbar-is-behind-sticky-elements-in-ios-safari

Your environment

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: ListSubheader iOS scrollbar

[aarongarciah]

This is a tricky one. Not sure we can land a proper solution. We'll investigate a bit. When the sticky subheaders have the same background color as the list, it's easy to subtract some pixels to avoid it covering te scrollbar. But doing that when the subheader has another background color makes it look really bad.

[functoria]

Hi, Thanks for the response!

Fortunately in my case, I've worked around it by adding some right padding to the List. I'm not sure why iOS scrollbars don't play well with sticky items, it looks fine on Android.

[aarongarciah]

@functoria your solution works well when subheaders have the same background as the list scrolling container, but it'd be problematic if subheaders have a different background, a bottom border, etc.

[aarongarciah]

Ok so adding isolation: isolate solves the issue to the scrolling container. I'll put up a PR unless you @functoria are interested in creating one.