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 component is blinking on appear in Safari 15.4

See original GitHub issue

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

https://user-images.githubusercontent.com/64441155/158840003-969baa34-b903-4eac-a3fd-013cbe7ad522.mp4

Original description:

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

https://user-images.githubusercontent.com/64441155/158737657-e8f094eb-345c-4e0c-b3d3-023689d49416.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.

https://user-images.githubusercontent.com/64441155/158738522-a818195a-382d-4d3b-83b4-b2eb27e6e98f.mp4

Steps to reproduce 🕹

Steps:

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

Isolated demo:

Open https://codesandbox.io/s/small-bush-ptm17b?file=/pages/index.js in Safari 15.4
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

Issue Analytics

State:
Created 2 years ago
Reactions:8
Comments:16 (10 by maintainers)

Top GitHub Comments

3reactions

igordanchenkocommented, Mar 17, 2022

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

2reactions

yjbincommented, Apr 14, 2022

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

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

How to Fix iPhone Screen Flickering after iOS 16/15 Update

1. Open Settings > Display Accommodations > toggle the bar to disable the Auto-Brightness option. You can also drag the brightness slider in...

New WebKit features in Safari 15.4 | Hacker News

Safari (and Mozilla) have had no interest in implementing this element as it's currently ... Essentially browser Push Notifications increase my privacy.

Release notes - OpenTok.js | Vonage Video API Developer

Safari versions 15.4 and 15.5 (which ship with iOS 15.4 and 15.5 and macOS 12.3 ... published from Safari on iOS/iPadOS may degrade...

appearance - CSS: Cascading Style Sheets - MDN Web Docs

checkbox, Firefox Chrome Safari Edge, The element used to be drawn like a checkbox, including only the actual "checkbox" portion.