[SwipeableDrawer] Very bad v5 performance on iPhone

EmilioMirasola commented 2 years ago

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 🌎

`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 commented 2 years ago

I can show some video of the differences if needed

EmilioMirasola commented 2 years ago

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

EmilioMirasola commented 2 years ago

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

suren-atoyan commented 2 years ago

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

https://user-images.githubusercontent.com/13118722/163265950-2bd444dc-c861-4f7a-b314-3ae67b8054bf.mov

First is Chrome, second - Safari.

Tested on:

iPhone 13 Pro
Chrome v100.0.4896.77
Safari v15

o-alexandrov commented 1 year ago

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 commented 1 year ago

It works on me using:

iOS version: 15.5
Chrome version: 104.0.5112.99

https://user-images.githubusercontent.com/4512430/185603954-a68e1963-feff-422e-b3a0-a364bde97bcd.mp4

What iOS version do you use?

o-alexandrov commented 1 year ago

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.

https://user-images.githubusercontent.com/9992724/185606094-b88c7749-cfd1-4661-a199-9452ebb59213.mp4

o-alexandrov commented 1 year ago

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?

https://user-images.githubusercontent.com/9992724/185609849-c8828729-1708-428c-8ae3-4d241a30b698.mp4

EmilioMirasola commented 1 year ago

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

QasimArif commented 1 year ago

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

gurkerl83 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

Thanks @gurkerl83 !

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

mui / material-ui