[SwipeableDrawer] Very bad v5 performance on iPhone

[EmilioMirasola]

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

[EmilioMirasola]

I can show some video of the differences if needed

[EmilioMirasola]

I've just tested the BottomNavigation component on your V4 documentation, and it seems that it's actually the same as on V5.

[EmilioMirasola]

If needed, I can provide you with a login on my production site to test our components.

[suren-atoyan]

@mnajdova @oliviertassinari any thoughts on this? just open the drawer demo page in mobile Chrome on iPhone. Try to open/close different drawers. There is no animation; it opens/closes with some latency. Everything works great on Safari.

fg.mov

First is Chrome, second - Safari.

Tested on:

• iPhone 13 Pro
• Chrome v100.0.4896.77
• Safari v15

[o-alexandrov]

To summarize, the following features from Material UI work in iOS Safari, but don't in iOS Chrome:

• Ripple effect
• Drawer animation
• and based on my experience, almost all other animation (except the mui.Collapse for some reason)

[mnajdova]

It works on me using:

• iOS version: 15.5
• Chrome version: 104.0.5112.99

video-1660906469.mp4

What iOS version do you use?

[o-alexandrov]

iOS version: 15.6
Chrome version: 104.0.5112.88

The setting Settings > Accessibility > Reduce Motion was disabled (so has nothing to do with this issue) on the screencast below.

animation-issues.mp4

[o-alexandrov]

When I closed all tabs, iOS Chrome works the same as iOS Safari.

• on a side note, animation from framer-motion doesn't have visual degradation like MUI does with the same number of opened tabs. Maybe, there's something you could learn from that library.

@EmilioMirasola @suren-atoyan can you check what you reported after closing all other tabs?

chrome-works-without-other-tabs.mp4

[EmilioMirasola]

@o-alexandrov I'm experiencing this in a PWA environment, so no other tabs are open

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

FullSizeRender.mp4

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

[gurkerl83]

Quick update, the last comment of https://bugs.chromium.org/p/chromium/issues/detail?id=1249723 mentions the problem is fixed in iOS 16.4 beta 1. I just installed beta 4 on my device, and all of those transition problems seem to be solved. It really was an Apple problem, but let's keep the issue open until others can confirm when the new OS version rolls out.

[QasimArif]

Thanks @gurkerl83 !

Tested it on 16.4 official release last night and it’s working great.