[Backdrop] Excessive CPU usage (original) (raw)

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Steps:

1. Include on a page. It can be open or closed, does not matter.

Current behavior 😯

The browser will now render composite layers on every animation frame, causing excessive CPU usage (>20%) on an inactive page.

The fix is simple: add display: none when the Backdrop should be hidden, e.g.,

    <Backdrop open={show} sx={{ display: show ? 'inherit' : 'none' }}>

solves this issue.

Expected behavior 🤔

Normal (idle web page) CPU usage.

Context 🔦

I don't want an idle page with an inactive background to use 20%+ CPU. During transitions (i.e., when the backdrop is shown) I'm OK with the CPU usage.

Your environment 🌎

npx @mui/envinfo

Google Chrome

  System:
    OS: macOS 12.6
  Binaries:
    Node: 18.9.0 - ~/.nvm/versions/node/v18.9.0/bin/node
    Yarn: 3.2.4 - ~/.nvm/versions/node/v18.9.0/bin/yarn
    npm: 8.19.1 - ~/.nvm/versions/node/v18.9.0/bin/npm
  Browsers:
    Chrome: 106.0.5249.119
    Edge: Not Found
    Firefox: 106.0.1
    Safari: 16.0
  npmPackages:
    @emotion/react:  11.9.0 
    @emotion/styled:  11.8.1 
    @mui/base:  5.0.0-alpha.102 
    @mui/core-downloads-tracker:  5.10.10 
    @mui/icons-material:  5.10.9 
    @mui/lab:  5.0.0-alpha.104 
    @mui/material:  5.10.10 
    @mui/private-theming:  5.10.9 
    @mui/styled-engine:  5.10.8 
    @mui/system:  5.10.10 
    @mui/types:  7.2.0 
    @mui/utils:  5.10.9 
    @types/react: 18.0.21 => 18.0.21 
    react: 18.2.0 => 18.2.0 
    react-dom: 18.2.0 => 18.2.0 
    styled-components:  5.3.5 
    typescript: 4.8.4 => 4.8.4