Repository: material-ui
Issue: [SwipeableDrawer] Very bad v5 performance on iPhone
Labels: performance,component: SwipeableDrawer

### Duplicates

- [x] I have searched the existing issues

### Latest version

- [X] I have tested the latest version

### Current behavior 😯

We recently started building a website with MUI, but sadly, the performance on iPhone is not good. When tapping a button, it seems like events happen after the animation, and the animations themselves are looking pretty sluggish. We've used MUI V4 on another website, where performance is no problem on iPhone.
We've tested on different iPhones, difference iOS versions (including iPhone 13 with newest iOS version), but it's the same everytime. On Android everything is smooth and events happen immediately.

I've tested quite a lot on the bottom navigation component https://mui.com/components/bottom-navigation/#main-content. When tapping an icon, the color change happens very slowly, and text resizing is sluggish.

We also have an iconbutton which opens up a drawer, but the drawer is first opened after the ripple animation. This is different from Android.

I'm not sure what's going on, as I've gone back and tested the website using V4, and here it just works without any problems. to me, it seems like that some events aren't handled before ripple has ended, but I'm not sure.

It seems like it's somehow restricted to buttons. Drawers seem to work fine.

I've tried everything without luck.
Btw I've tried been on your official docs from my iPhone, and it seems that the the problem also exists here, atleast on the bottom navigation component.

### Expected behavior 🤔

Same behavior on iPhone as on Android

### Steps to reproduce 🕹

https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAJQKYEMDGMA0cDejUYCiANkiEgHbwC+cAZlBCHAORQEwsBQoksucAEIQYMJgDkUAN2ABzFDGAQK2YaInS5CpRQCCGHdgAKKMEijYArgGckAFQAWZJHFoMmrAAIhLwAPQgCubAKMTcvNDweACSaMqu9IzMLJ7AcRTAdACefuzonDzgkQJ2KABG1la2amIgkjLyisoAwsowSAAeNIkeLAB0fvqKUkg1Gg3ayqVlrVSdBRH8-QN9A7pgYH1o1tbcXJ188OnW8GN10nAAvHAAFACUAFz4+STOVFcAfLhcAJDHUXB8sARtNsLYYENgfZyglrjZRiJavUtE0KLN2l17r9-nAYE5yFc4PDHM4sb92DBLFAKLdfj8ADwmMxQOBoYgoHaSciXHAsawOKDACgAa3RlBgAHkKAAZFBQWRIADKaHYlF2tGsHR5eEg1mAqKeLDowA6SAAJixsGVEUwngAGbCkOgwe3YQWyBwuuB21zUOlwAOBuBIUhSSYUHkAZmoHzpDLOyMaOjjP35EAA7rKyiHrCmw8RLEgeUCQeU-T8Kz8Wg4UBQFTybkhsBQkOmAGqhQt3T5wcGQ0tlG4t9udpB3cuVzXauBlWRxYjQJ545x9MChJCiJB9WzpM1yrJ9YhyT2+uOxyvxm3nCaoyHxdnZ4g8lgACQAVmQWLQ0soefTYvEdBtIqwAAF5FjgABMACs37pDyZobuYIBCkgL5MEgAEUPctB+B8uHnpW9IJpoSbKHeNIPiGz7KtAQqyF+cA-hGOD-uk9DAWBEEwXBv44Ih7RQChLa0YKdZYThcB4QRKbEVeibhhRcBUU+vLRBQZonMAxBHnW5hfimQZGcZJkBsxf5YRxVAgeBPI8Ux8H8UhQmoYqG6KHW1gSeOUn4b5cb0n4JE3johGBUy5jnncXC-HQlgUAY8QCchqHoeQ3lPCcYmyN8FaZLcJbQmUVyXNc0zWH0L4SgAsoQ3Y4HGFJUjSLAgGawAPA4GHcBWtA5i4DWVk11KsG1HVdeQAC0ECWDAulID1Pzln6sXxYlNLJS5IlxNlGW9jA2W5T8+U3IV0wlWV5QVYqzQSgg0TiAA4vVjUbs1o3tQ8aByppi19cQthHT8w0tWNX0-dY02zfNf2-CtPxxQlqJwJtwlKu59Feek9yZQd9FHSdZ0wqVl0VH0iqEHYdgPY9iovUNb0ja1n1xAxdL-YDg0ViDH0dazUNzahsNLVw1BAA


Of course this will not work as you don't have our project, but this is our code.

### Context 🔦

A more snappy application, which feels the same regardless of OS.

### Your environment 🌎

<details>
  <summary>`npx @mui/envinfo`</summary>

```
  Don't forget to mention which browser you used.
-- Safari iPhone

  Output from `npx @mui/envinfo` goes here.
System:
    OS: Windows 10 10.0.22000
  Binaries:
    Node: 16.13.1 - C:\Program Files\nodejs\node.EXE
    Yarn: Not Found
    npm: 8.1.2 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: Not Found
    Edge: Spartan (44.22000.120.0), Chromium (98.0.1108.43)
  npmPackages:
    @emotion/react:  11.7.1 
    @emotion/styled:  11.6.0 
    @mui/base:  5.0.0-alpha.68 
    @mui/icons-material: ^5.4.1 => 5.4.1 
    @mui/material: ^5.4.1 => 5.4.1 
    @mui/private-theming:  5.4.1 
    @mui/styled-engine:  5.4.1 
    @mui/styles: ^5.4.1 => 5.4.1 
    @mui/system:  5.4.1 
    @mui/types:  7.1.1 
    @mui/utils:  5.4.1 
    @types/react: ^17.0.39 => 17.0.39 
    react: ^17.0.2 => 17.0.2 
    react-dom: ^17.0.2 => 17.0.2 
    typescript: ^4.5.5 => 4.5.5 

```
</details>

<details>
 <summary>`Tsconfig`</summary>
{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ]
}

</details>