material-ui
material-ui copied to clipboard
Menu Component Lags/Freezes when opening in Chrome
Duplicates
- [X] I have searched the existing issues
Latest version
- [X] I have tested the latest version
Steps to reproduce 🕹
Link to live example: https://netlify--visionary-marzipan-48871f.netlify.app/ Steps:
- Open the page URL that is provided above in Chrome and in
- Click on the Game button which has a gold coin inside, a screenshot attached highlighting the button
- MUI Menu Opens
Current behavior 😯
Opening the MUI Menu freezes the browser for a couple of milliseconds, this issue is happening on Chrome, while on Firefox everything seems to be ok. Also, on Chrome, as the component is opening with some sort of delay, the animation cannot be seen. Attaching videos of both Chrome and Firefox behaviors
https://user-images.githubusercontent.com/85575221/205615313-3b90c801-dd6a-409e-b95a-07c7ad89771a.mov
https://user-images.githubusercontent.com/85575221/205615354-5aeda027-0121-4879-9ce1-cc7c75a02448.mov
Expected behavior 🤔
The MUI Menu opens without delays, also, with the animation applied
Context 🔦
Trying to implement the MUI's component library into the application for already pre-defined components and pre-tested components to make the application smoother, and the issue happened with MUI Menu component
Your environment 🌎
npx @mui/envinfo
System:
OS: macOS 12.6.1
Binaries:
Node: 18.12.0 - /usr/local/bin/node
Yarn: 1.22.19 - /usr/local/bin/yarn
npm: 8.19.2 - /usr/local/bin/npm
Browsers:
Chrome: 108.0.5359.94
Edge: Not Found
Firefox: 107.0.1
Safari: 16.1
npmPackages:
@emotion/react: ^11.10.5 => 11.10.5
@emotion/styled: ^11.10.5 => 11.10.5
@mui/base: 5.0.0-alpha.108
@mui/core-downloads-tracker: 5.10.16
@mui/icons-material: ^5.10.15 => 5.10.15
@mui/material: ^5.10.16 => 5.10.16
@mui/private-theming: 5.10.16
@mui/styled-engine: 5.10.16
@mui/styles: ^5.10.14 => 5.10.14
@mui/system: 5.10.16
@mui/types: 7.2.2
@mui/utils: 5.10.16
@types/react: 18.0.9 => 18.0.9
react: 18.1.0 => 18.1.0
react-dom: 18.1.0 => 18.1.0
typescript: 4.7.2 => 4.7.2
It doesn't look like this bug report has enough info for one of us to reproduce it.
Please provide a CodeSandbox (https://material-ui.com/r/issue-template-latest), a link to a repository on GitHub, or provide a minimal code example that reproduces the problem.
Here are some tips for providing a minimal example: https://stackoverflow.com/help/mcve
Hi Marija,
Sorry for the delayed response, I'm currently working on investigating the issue because it may be due to the component's complexity and how am I handling the state for multiple components in the Game
component, and will let you know at the start of the next week, whether this issue on my side or if it may be an issue with MUI component and will provide the required CodeSandbox minimal working code example.
Best regards. Ignas
@mnajdova You can close this one out, seems that the issue was due to a large bg image and it was causing all of the components(native and MUI) to have a delay on render, thanks!