[Slider] Breaks with `Modal` + `overflow: "scroll"` on iOS

[pipech]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Steps to reproduce 🕹

Code:

import * as React from "react";
import {
  Modal,
  Container,
  Slider
} from "@mui/material";

export default function App() {
  const marks = [
    {
      value: 0,
      label: "0°C"
    },
    {
      value: 20,
      label: "20°C"
    },
    {
      value: 37,
      label: "37°C"
    },
    {
      value: 100,
      label: "100°C"
    }
  ];

  function valuetext(value: number) {
    return `${value}°C`;
  }

  return (
    <Modal sx={{ overflow: "scroll" }} open>
      <Container
        sx={{
          minHeight: "200vh",
          paddingTop: "20vh",
          backgroundColor: "white"
        }}
      >
        <Slider
          aria-label="Always visible"
          defaultValue={80}
          getAriaValueText={valuetext}
          step={10}
          marks={marks}
          valueLabelDisplay="on"
        />
      </Container>
    </Modal>
  );
}

Link to live example: https://codesandbox.io/s/fervent-mcclintock-xzilxh?file=/src/App.tsx

Steps:

1. Using iOS device (Tested on iPad Mini 6 or iPhone 12 Pro)
2. Goes to https://xzilxh.csb.app/ (Code Sandbox Live Preview)
3. Scroll down to bottom (Till slider disappear from the view port)
4. Scroll back up
5. Slide on slider

Current behavior 😯

Modal + overflow: "scroll" + Slider on iOS device.

It shows artifact of silder.

https://user-images.githubusercontent.com/24489363/199036848-be829f04-815a-4744-8e20-1a94ac77a4a1.mp4

Expected behavior 🤔

No artifact, slider behave as it should.

Context 🔦

I'm building review form which allow user to slide and select that perceived intensity of their coffee. I build this form inside modal and it got too long so I have to add overflow: "scroll" to modal and that is where the problem occurs.

Your environment 🌎

npx @mui/envinfo

  System:
    OS: Linux 5.10 Debian GNU/Linux 9 (stretch) 9 (stretch)
  Binaries:
    Node: 14.17.3 - /usr/local/bin/node
    Yarn: 1.22.5 - /usr/local/bin/yarn
    npm: 6.14.13 - /usr/local/bin/npm
  Browsers:
    Chrome: Not Found
    Firefox: Not Found
  npmPackages:
    @emotion/react: ^11.4.1 => 11.4.1 
    @emotion/styled: ^11.3.0 => 11.3.0 
    @mui/core:  5.0.0-alpha.47 
    @mui/icons-material: ^5.0.0 => 5.0.0 
    @mui/material: ^5.0.0 => 5.0.0 
    @mui/private-theming:  5.0.0 
    @mui/styled-engine:  5.0.0 
    @mui/system: ^5.0.0 => 5.0.0 
    @mui/types:  7.0.0 
    @mui/utils:  5.0.0 
    @mui/x-date-pickers: ^5.0.0-alpha.2 => 5.0.0-alpha.2 
    @types/react:  17.0.15 
    react: 18.2.0 => 18.2.0 
    react-dom: 18.2.0 => 18.2.0 
    typescript: 4.4.2 => 4.4.2

[pipech]

FYI

Workaround is to use Container sx={{ overflowY: 'auto', maxHeight: '85vh' }} inside Modal instead of using Modal sx={{ overflow: 'scroll' }}.

[michaldudak]

Thanks for the report. I was able to reproduce it. TBH, judging by how the artifact looks, it seems like a bug in Safari. I wonder if it would be possible to reproduce it without Material UI components.