[performance] Very bad v5 performance on iPhone

Duplicates

• I have searched the existing issues

Latest version

• 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 🌎

`npx @mui/envinfo`

  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 

`Tsconfig`

{ "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" ] }

[gurkerl83]

This issue is related to a known chrome bug on iOS. Animation stops working after switching tabs in the browser. I tracked the following issues.

https://bugs.chromium.org/p/chromium/issues/detail?id=899130

https://bugs.chromium.org/p/chromium/issues/detail?id=1249723

https://bugs.chromium.org/p/chromium/issues/detail?id=1231712

Also, using framer-motion for animation in my projects and they don’t break.

[QasimArif]

Any updates on this? I came across this issue just over a year ago on another drawer so my guess is it’s related to Chrome on iOS. It gets progressively worse every time you leave and come back.

https://user-images.githubusercontent.com/12385607/199370722-1acd7e59-2cf4-4d21-99c0-91b865e20eca.mp4