Case ce-0095 · Scenario scenario-css-will-change

CSS will-change may improve or degrade contenteditable performance

OS: macOS 14.0 Device: Desktop or Laptop MacBook Pro Browser: Chrome 120.0 Keyboard: US Status: draft
css-will-change performance chrome macos

Phenomenon

When a contenteditable element has CSS will-change property set, performance may be affected. In some cases, it may improve performance by hinting the browser about upcoming changes. In other cases, it may degrade performance by creating unnecessary layers.

Reproduction example

  1. Create a contenteditable div with will-change: contents or will-change: transform.
  2. Type text rapidly and measure performance.
  3. Try different will-change values.
  4. Compare performance with and without will-change.
  5. Check memory usage.

Observed behavior

  • In Chrome on macOS, will-change may have mixed effects on performance.
  • Some values may improve performance.
  • Other values may degrade performance.
  • Memory usage may increase.

Expected behavior

  • will-change should provide consistent performance benefits.
  • Or, the behavior should be clearly documented.
  • Memory usage should remain reasonable.

Playground for this case

Use the reported environment as a reference and record what happens in your environment while interacting with the editable area.

Reported environment
OS: macOS 14.0
Device: Desktop or Laptop MacBook Pro
Browser: Chrome 120.0
Keyboard: US
Your environment

Use this editable area to reproduce the described case.

Event log
Use this log together with the case description when filing or updating an issue.
0 events
Interact with the editable area to see events here.