[Grow] Workaround for Safari 15.4 CSS transition bug not affects WebKit

[bc-m]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Current behavior 😯

Same issue like #31380 but in Apps using WebKit.

Expected behavior 🤔

Not flickering like in Safari with workaround from #31975.

Steps to reproduce 🕹

Steps:

1. Use MUI in an app using WebKit (in my case we use Capacitor on iOS 15.4)
2. Use components with grow effects

Context 🔦

User agent on Safari (macOS):

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.4 Safari/605.1.15

Affected by workaround :white_check_mark:

User agent on Safari (iPhone, iOS):

Mozilla/5.0 (iPhone; CPU iPhone OS 15_4_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.4 Mobile/15E148 Safari/604.1

Affected by workaround :white_check_mark:

User agent on WebKit (iPhone, iOS):

Mozilla/5.0 (iPhone; CPU iPhone OS 15_4_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148

NOT affected by workaround. :warning:

Your environment 🌎

iPhone 12 Pro with iOS 15.4 using latest MUI and latest Capacitor.

`npx @mui/envinfo`

System: OS: macOS 12.3.1 Binaries: Node: 16.13.2 - /usr/local/bin/node Yarn: 1.22.15 - /usr/local/bin/yarn npm: 8.5.5 - /usr/local/bin/npm Browsers: Chrome: 100.0.4896.60 Edge: Not Found Firefox: Not Found Safari: 15.4 npmPackages: typescript: ^4.6.3 => 4.6.3

[bc-m]

Suggested correction:

https://github.com/igordanchenko/material-ui/blob/585c4a3850936d7ddcd60ed4ad063996415e0f3a/packages/mui-material/src/Grow/Grow.js#L28

const isSafari154 =
  typeof navigator !== 'undefined' &&
-  /^((?!chrome|android).)*safari/i.test(navigator.userAgent) &&
+  /^((?!chrome|android).)*(safari|mobile)/i.test(navigator.userAgent) &&
  /version\/15\.[4-9]/i.test(navigator.userAgent);

See my tests here: https://regex101.com/r/hKmRmE/1 (see function > unit tests in menu)

Maybe the variable should renamed to isSafariOrWebKit154 too.

[michaldudak]

Wouldn't it fail anyway due to the /version\/15\.[4-9]/i part missing from your user agent?

[bc-m]

You are right!

const isSafari154 =
  typeof navigator !== 'undefined' &&
-  /^((?!chrome|android).)*safari/i.test(navigator.userAgent) &&
+  /^((?!chrome|android).)*(safari|mobile)/i.test(navigator.userAgent) &&
-  /version\/15\.[4-9]/i.test(navigator.userAgent);
+  /(os |version\/)15(.|_)[4-9]/i.test(navigator.userAgent);

Do you like this approach or do you prefer two seperate checks (one for safari and one for webkit)?

[igordanchenko]

I've collected some samples of iOS 3rd-party user agents that are also affected by the same WebKit bug. It's worth noting that Brave reports an incorrect iOS version even though it's still affected. But I guess it's on them since they fail to report the correct version in their user agent.

Based on what I gathered so far, the change @BC-M is proposing will cover all major 3rd-party browsers on iOS 👍

Chrome: Mozilla/5.0 (iPhone; CPU iPhone OS 15_4 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/100.0.4896.77 Mobile/15E148 Safari/604.1

Firefox: Mozilla/5.0 (iPhone; CPU iPhone OS 15_4_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) FxiOS/99.0 Mobile/15E148 Safari/605.1.15

Edge: Mozilla/5.0 (iPhone; CPU iPhone OS 15_4 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) EdgiOS/100.0.1185.29 Version/15.0 Mobile/15E148 Safari/604.1

Brave: Mozilla/5.0 (iPhone; CPU iPhone OS 15_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.0 Mobile/15E148 Safari/604.1

Opera: Mozilla/5.0 (iPhone; CPU iPhone OS 15_4_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148 OPT/3.2.12

[igordanchenko]

I'll work on a pull request since it was my omission in the first place... 😞