[Grow] Grow component is blinking on appear in Safari 15.4

[igordanchenko]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

Grow component is blinking on appear in Safari 15.4. The below slow-mo recording demonstrates this issue in Menu component captured at https://mui.com/components/menus/#main-content

IMG_0333.mp4

Original description:

Menu component is appearing twice in Safari creating blinking effect. I noticed this behavior only in Safari (both desktop and mobile)

Screen.Recording.2022-03-17.at.12.23.55.AM.mp4

Expected behavior 🤔

Menu appearing effect should be consistent across major browsers. The below screen recording shows the same menu opening in Chrome without blinking.

Screen.Recording.2022-03-17.at.12.36.05.AM.mp4

Steps to reproduce 🕹

Steps:

1. Open https://mui.com/components/menus/#main-content in Safari 15.4
2. Click the "Dashboard" button.

Isolated demo:

1. Open https://codesandbox.io/s/small-bush-ptm17b?file=/pages/index.js in Safari 15.4
2. Click the "Show" button

Context 🔦

No response

Your environment 🌎

`npx @mui/envinfo`

  System:
    OS: macOS 12.3
  Binaries:
    Node: 17.7.1 - /usr/local/bin/node
    Yarn: 1.22.17 - /usr/local/bin/yarn
    npm: 8.5.2 - /usr/local/bin/npm
  Browsers:
    Chrome: 99.0.4844.74
    Edge: Not Found
    Firefox: 97.0.1
    Safari: 15.4

[IonVillarreal]

hello, I have the same problem with the Tooltips in Safari 15.

Grabacion.de.pantalla.2022-03-17.a.la.s.08.36.00.mov

[igordanchenko]

I was able to narrow this down to the Grow component. I will update the title and the description accordingly.

[igordanchenko]

I was able to eliminate this visual glitch in Safari by replacing

material-ui/packages/mui-material/src/Grow/Grow.js

Line 99 in f2d6337

duration: duration * 0.666,

with

      duration,

I also noticed the exit effect was somewhat jerky in mobile Safari, so I ended up with the following patch-package. Not sure this is the right solution for MUI as it seems like a workaround for a Safari-specific bug, but maybe someone will find it helpful until a proper fix is in place. At least, this patch eliminated most of the current flickering in my projects.

`patch-package`

diff --git a/node_modules/@mui/material/Grow/Grow.js b/node_modules/@mui/material/Grow/Grow.js
index d2b6802..d69849e 100644
--- a/node_modules/@mui/material/Grow/Grow.js
+++ b/node_modules/@mui/material/Grow/Grow.js
@@ -97,7 +97,7 @@ const Grow = /*#__PURE__*/React.forwardRef(function Grow(props, ref) {
       duration,
       delay
     }), theme.transitions.create('transform', {
-      duration: duration * 0.666,
+      duration,
       delay,
       easing: transitionTimingFunction
     })].join(',');
@@ -133,11 +133,11 @@ const Grow = /*#__PURE__*/React.forwardRef(function Grow(props, ref) {
       duration,
       delay
     }), theme.transitions.create('transform', {
-      duration: duration * 0.666,
-      delay: delay || duration * 0.333,
+      duration,
+      delay,
       easing: transitionTimingFunction
     })].join(',');
-    node.style.opacity = '0';
+    node.style.opacity = 0;
     node.style.transform = getScale(0.75);
 
     if (onExit) {

P.S. This definitely looks like a Safari 15.4 bug. I was able to get my hands on a VM with Safari 15.3 and I'm not seeing this glitch in Safari 15.3.

[michaldudak]

Duplicate of #31380

[michaldudak]

@igordanchenko The workaround you proposed seems to do the trick. Would you like to create a PR? It does change the appearance of the transition, but it seems we have to do this until webkit fixes the issue on their side.

Aside from changes in line 99, lines 140-141 also would have to be updated to fix the out transition.

[igordanchenko]

Sure, I’ll send a PR shortly.

[michaldudak]

It would be great to use this workaround only in Safari 15.4, so the appearance of the animation is not degraded in other browsers.

[igordanchenko]

@michaldudak, the PR is ready for review.

[orenklein]

@michaldudak This issue is also presented in latest v4 and it is quite critical UX issue IMO. Is it considerable to apply this fix to v4 as well?

[michaldudak]

@orenklein Yes, we can do it. Would you like to prepare a PR (also taking #32202 into consideration)?

[IGMontero]

Hey, what's the state of things with this issue?
I found it recently and I need to fix it asap but haven't found a way around it.
Is it fixed for v5?

[igordanchenko]

All linked PRs are merged into master, and the latest fixes are available in v5.6.1

[yjbin]

I would like to ask when the issue will be repaired in v4?
Thanks!

[davidbonnet]

@orenklein, @yjbin, a cherrypick of the fix on the v4.x branch is available in this PR: #32304

[igordanchenko]

@davidbonnet, you probably want to backport #32202 as well

[davidbonnet]

Done.
Thanks @igordanchenko for pointing that out.