question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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: GIF from docs in Safari on macOS

Expected behavior 🤔

The end of the transition should not flicker. GIF from docs in Firefox on macOS: 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

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:15 (8 by maintainers)

github_iconTop GitHub Comments

6reactions
michaldudakcommented, Mar 15, 2022

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.

4reactions
devgregwcommented, Mar 15, 2022
Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found