[Grow] Grow transition flickers on Safari for macOS and iOS
See original GitHub issueDuplicates
- 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:
- Open Safari on macOS or iOS
- Navigate to https://mui.com/components/transitions/
- 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
Issue Analytics
- State:
- Created 2 years ago
- Comments:15 (8 by maintainers)
Top Results From Across the Web
Rendering bug and element flickering in Safari 15.4.1
A workaround is that we set "transformation: translateZ(0)" at the lowest level. This stops the flickering of the elements, but the repainting of...
Read more >CSS Transform causes flicker in Safari, but only when the ...
CSS Transform causes flicker in Safari, but only when the browser is >= 2000px wide · Keep in mind that the flickering can...
Read more >New Slideshow flickers on transitions - Mac OS X - Digital Grin
I re-iterate - On my Mac, OSX 10.6.8, Chrome Version 30.0.1599.0 dev, the flicker is caused by the PREVIOUS image repainting over the...
Read more >Issues with Safari - Smart Slider Documentation - Help Scout
Some iOS/macOS versions have bugs with viewport based image html codes what we are using while Retina is being turned on at the...
Read more >Jittery macOS mouse cursor when hovering over links
Every time the mouse transitions from the hyperlink pointer to the arrow pointer, the arrow pointer briefly visibly flashes in the wrong ...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
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.
Potentially related WebKit bug