Menu Component Lags/Freezes when opening in Chrome

[IgnasDav]

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:

1. Open the page URL that is provided above in Chrome and in
2. Click on the Game button which has a gold coin inside, a screenshot attached highlighting the button
3. 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

[mnajdova]

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

[IgnasDav]

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

[IgnasDav]

@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!