[SpeedDial] First button flickers when opened on an iPhone

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

When using the speed dial on a iPhone 12 the first SpeedDialAction button flickers when it opens:

https://user-images.githubusercontent.com/20607905/163911133-a277b5fc-8533-4ef7-a397-3222b1017348.mp4

Only able to produce this on iPhone (in Safari), when the button loads afterwards it works. On Android/Desktop it works as expected.

Edit: Also happens on iPhone 11, on latest version of iOS/Safari

Edit x 2: added a sandbox using simple speed dial https://codesandbox.io/s/reverent-cray-ey0x9w?file=/src/Demo.tsx

Expected behavior 🤔

For button to transition in without flickering

Steps to reproduce 🕹

Steps:

1. Ran a fresh install of React (typescript)
2. Install mui & mui icons
3. Create a speed dial component
4. Test on iPhone 12

Context 🔦

Create a web app which uses the MUI speed dial, the flickering is visual only

Your environment 🌎

`npx @mui/envinfo`

System: OS: macOS 12.3.1 Binaries: Node: 16.13.2 - ~/.nvm/versions/node/v16.13.2/bin/node Yarn: 1.22.17 - ~/.yarn/bin/yarn npm: 8.1.2 - ~/.nvm/versions/node/v16.13.2/bin/npm Browsers: Chrome: Not Found Edge: 99.0.1150.55 Firefox: Not Found Safari: 15.4 npmPackages: @emotion/react: ^11.9.0 => 11.9.0 @emotion/styled: ^11.8.1 => 11.8.1 @mui/base: 5.0.0-alpha.77 @mui/icons-material: ^5.6.2 => 5.6.2 @mui/material: ^5.6.2 => 5.6.2 @mui/private-theming: 5.6.2 @mui/styled-engine: 5.6.1 @mui/system: 5.6.2 @mui/types: 7.1.3 @mui/utils: 5.6.1 @types/react: ^18.0.0 => 18.0.5 react: ^18.0.0 => 18.0.0 react-dom: ^18.0.0 => 18.0.0 typescript: ^4.4.2 => 4.6.3

[michaldudak]

Great! Let me know if you need any help.

[sarikabhimre18]

Hii, I got the same issue to on iphone 13. The first button flicker once loaded and work fine as expected in browser devices.