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.

[Select] Basic select demo flickers when opened

See original GitHub issue

Duplicates

I have searched the existing issues

Latest version

I have tested the latest version

Current behavior 😯

When I open the Selector, it renders twice.

OS: iOS 15.4.1 Browser: chrome version 99.0.4844.59

https://user-images.githubusercontent.com/62978539/161784943-31d739af-a6c1-4190-b9df-971242e49deb.MP4

Expected behavior 🤔

No rendering problems should occur.

Steps to reproduce 🕹

Occurs whenever the Selector component is opened under the applicable conditions.

Context 🔦

The rendering problem must be solved to eliminate the sense of discomfort.

Your environment 🌎

`npx @mui/envinfo`

System: OS: macOS 11.5.2 Binaries: Node: 16.13.0 - /usr/local/bin/node Yarn: 1.22.17 - /opt/homebrew/bin/yarn npm: 8.3.2 - /opt/homebrew/bin/npm Browsers: Chrome: 100.0.4896.75 Edge: Not Found Firefox: Not Found Safari: 14.1.2 npmPackages: @emotion/react: 11.8.2 => 11.8.2 @emotion/styled: 11.8.1 => 11.8.1 @mui/base: 5.0.0-alpha.74 @mui/icons-material: 5.5.1 => 5.5.1 @mui/material: 5.5.3 => 5.5.3 @mui/private-theming: 5.5.3 @mui/styled-engine: 5.5.2 @mui/system: 5.5.3 @mui/types: 7.1.3 @mui/utils: 5.5.3 @types/react: 17.0.43 => 17.0.43 react: 17.0.2 => 17.0.2 react-dom: 17.0.2 => 17.0.2 typescript: 4.6.3 => 4.6.3

*The event is occurring in the Chrome browser on the iPhoneXR.

Issue Analytics

State:
Created a year ago
Comments:5 (2 by maintainers)

Top GitHub Comments

1reaction

richpixelcommented, Apr 6, 2022

I’m seeing this flickering behavior on iOS & Mac Safari for Menu and Tooltip

It doesn’t happen if using TransitionComponent={Fade}

There also seems to be issues with mousing over the menu items- the highlights are not being removed on previously mouse over items.

Material UI v4.12.3

MacOS: 12.3.1 (Monterey) Browser: Safari 15.4

Device: iPhone X OS: iOS 15.4.1 Browser: Safari

0reactions

igordanchenkocommented, Apr 8, 2022

@michaldudak, the workaround for #31380 specifically targeted Safari browser. But apparently I overlooked the fact that Apple requires all 3rd-party iOS browsers to use WebKit, so all of them are affected by the same WebKit bug.

Here is a screen recording of this bug in iOS Chrome 100.0.4896.77:

https://user-images.githubusercontent.com/64441155/162477976-96251ebd-387a-40ab-9a2f-d287e555ba66.mov

Similarly to #32167 those browsers are not captured by Safari user agent regex since they are using their own user agent strings. I will look into this and will propose a solution shortly.