[Grow] Grow transition flickers on Safari for macOS and iOS

[devgregw]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

The Grow transition flickers toward the end of the transition on Safari (tested on macOS and iOS). The length of the flicker depends on the transition's duration. The transition is also not fading out properly. This appears to happen on any component that uses Grow (Dialogs, Snackbars, Menus, etc.)
GIF from docs in Safari on macOS:

Expected behavior 🤔

The end of the transition should not flicker.
GIF from docs in Firefox on macOS:

Steps to reproduce 🕹

Steps:

1. Open Safari on macOS or iOS
2. Navigate to https://mui.com/components/transitions/
3. Toggle on and off the Grow demo switch

Context 🔦

The flicker is jarring, but only occurs on Safari.

Your environment 🌎

`npx @mui/envinfo`

  System:
    OS: macOS 12.3
  Binaries:
    Node: 14.18.0 - /usr/local/bin/node
    Yarn: 1.22.17 - /opt/homebrew/bin/yarn
    npm: 8.5.3 - /usr/local/bin/npm
  Browsers:
    Chrome: Not Found
    Edge: Not Found
    Firefox: 96.0.2
    Safari: 15.4

[michaldudak]

I haven't been able to reproduce this issue, even with a long timeout. @siriwatknp could you take a look?

[devgregw]

I haven't been able to reproduce this issue, even with a long timeout.

I was not able to reproduce this myself on a non-beta version of macOS (12.2.1 and Safari 15.3; I opened the issue with 12.3/15.4). Could this just be a Safari bug?

[siriwatknp]

I could not reproduce too 🥲

[michaldudak]

Could this just be a Safari bug?

It seems so. We can get back to it when Safari 15.4 is out of beta. We'll see if the problem still persists then.

[mattsrobot]

I'm getting this issue since upgrading to macOS 12.3 today. I'm noticing ALL menus (selects, menus, etc) using the animation are flickering and behaving strange.

You can reproduce by simply going to the Demo's and Examples on the mui website. All the examples flicker.

FYI is it normal to put such a serious bug "on hold" given macOS has been in public beta for such a long time, and release candidates were already available? Why are you waiting for the official release that'll break everyone who is now upgrading today?

[michaldudak]

This does not look like an issue within Material UI. It seems that Safari introduced a bug and it should be reported there.

See the plain HTML & CSS example: https://jsbin.com/poyafawore/edit?html,css,output - simultaneously transitioning both opacity and transform with different transition lengths causes opacity transition to be reset after transform finishes its transition.

[devgregw]

Potentially related WebKit bug

[michaldudak]

For reference:
Webkit bug: https://bugs.webkit.org/show_bug.cgi?id=237972
Solution: https://trac.webkit.org/changeset/291526/webkit/ (not landed in Safari TP yet, as of Release 144)

[mdalpozzo]

I'm seeing this issue on ios 15.4.1 in Safari AND in Chrome mobile browsers.
Also seeing this in desktop Safari 15.4.

[igordanchenko]

@michaldudak, it appears the fix has landed in Safari 15.5. Would you prefer to update #31975 and limit it to Safari 15.4? or just remove it completely in 1-2 months once most Safari 15.4 users upgrade to 15.5?

[igordanchenko]

@mdalpozzo, you probably want to submit a separate ticket with detailed description (specifically MUI version) and reproduction. Please note that MUI v4 never received a fix.

[Richard-Halabi]

any idea how to solve this issue, I mean even mui 5 has it ?

[michaldudak]

@igordanchenko yes, we could limit the scope of the fix to just 15.4. I'd appreciate it if you could prepare a PR.

@Richard-Halabi at this point it's best to update Safari to the latest version.

[tyuen]

This bug has been fixed in Safari 15.5

[hanayashiki]

This bug has been fixed in Safari 15.5

true? I'm experiencing a similar bug

---

update: for any one facing a Safari bug that flickers when you fade in texts

@keyframes fade-in {
  from: { opacity: 0 }
}

Adding transitions-colors will work around the issue

.transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
# Yes, this is from tailwindcss