Repository: material-ui
Issue: [Slider] Breaks with `Modal` + `overflow: "scroll"` on iOS
Labels: bug 🐛,component: slider,browser: Safari

### Duplicates

- [X] I have searched the existing issues

### Latest version

- [X] I have tested the latest version

### Steps to reproduce 🕹

Code:
```javascript
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.

![S__13279235](https://user-images.githubusercontent.com/24489363/199035589-48b62798-37d6-41af-985c-aa5a6cd28629.jpg)
![S__13279237](https://user-images.githubusercontent.com/24489363/199035599-0cd38d1f-31d0-4bd5-8952-f3ea7238f44b.jpg)

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.

![image](https://user-images.githubusercontent.com/24489363/199037735-6070fa18-d614-4544-b7a3-a8285fc2cbe9.png)

### Your environment 🌎

<details>
  <summary><code>npx @mui/envinfo</code></summary>

```
  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
```
</details>