Dialog shadows flicker under certain conditions with custom theme - Githubissues

mui / material-ui

Material UI: Comprehensive React component library that implements Google's Material Design. Free forever.

https://mui.com/material-ui/

MIT License

93.96k stars 32.27k forks source link

Dialog shadows flicker under certain conditions with custom theme #21575

Closed bluskript closed 4 years ago

bluskript commented 4 years ago

Under certain conditions, the background shadows of dialogs flicker weirdly.

[x] The issue is present in the latest release.
[x] I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

Dialog shadows stay constant while the dialog is open.

Expected Behavior 🤔

Dialog shadows flicker in certain events (such as tab page change)

Steps to Reproduce 🕹

https://codesandbox.io/s/stoic-tu-5p9wl

Steps:

Add custom theme with createMuiTheme and <ThemeProvider />
Create a dialog
Add stateful tabs to the dialog, that update the selected tab index when changed. 4.Switch tabs. The shadow will shrink for a second, and then restore to the original size.

video demo

Context 🔦

I am trying to add tabs to a dialog with a custom theme.

Your Environment 🌎

Tech	Version
Material-UI	v4.10.2
React	16.13.1
Browser	Google Chrome 83.0.4103.106

oliviertassinari commented 4 years ago

I believe it's a rendering anomaly from the browser, nothing we have much control over.