[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.