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
Open case →Scenario
CSS will-change may improve or degrade contenteditable performance
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.
performance
Scenario ID
scenario-css-will-change
Details
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.
References
- Chrome Developers: Inside Browser Part 3 - Compositor layers explanation
- Web.dev: Stick to compositor-only properties - Layer management
- LogRocket: When and how to use CSS will-change - will-change best practices
- Readium: CSS performance hacks - will-change: contents
- ProseMirror Discuss: Performance issue with Chrome v96 - Spellcheck performance
- Web.dev: content-visibility - Content visibility optimization
- Coding Courses: CSS will-change property - Usage timing
References
- Chrome Developers: Inside Browser Part 3 - Compositor layers explanation
- Web.dev: Stick to compositor-only properties - Layer management
- LogRocket: When and how to use CSS will-change - will-change best practices
- Readium: CSS performance hacks - will-change: contents caveats
- ProseMirror Discuss: Performance issue with Chrome v96 - Spellcheck performance
- Web.dev: content-visibility - Content visibility optimization
- Coding Courses: CSS will-change property - Usage guidelines
Scenario flow
Visual view of how this scenario connects to its concrete cases and environments. Nodes can be dragged and clicked.
Variants
Each row is a concrete case for this scenario, with a dedicated document and playground.
| Case | OS | Device | Browser | Keyboard | Status |
|---|---|---|---|---|---|
| ce-0095-contenteditable-with-css-will-change | macOS 14.0 | Desktop or Laptop MacBook Pro | Chrome 120.0 | US | draft |
Cases
Open a case to see the detailed description and its dedicated playground.
Related Scenarios
Other scenarios that share similar tags or category.
Tags: performance, chrome, macos
CSS filter may affect contenteditable performance
When a contenteditable element has CSS filters applied (blur, brightness, etc.), editing performance may be degraded. Typing may lag, and selection may be slow to update.
1 case
Tags: performance, chrome, macos
Virtual scrolling libraries interfere with contenteditable selection
When a contenteditable element is used with virtual scrolling libraries (e.g., for large documents), the virtual scrolling mechanism may interfere with text selection and caret positioning. The selection may be lost when elements are removed from the DOM during scrolling.
1 case
Tags: performance, macos
MutationObserver may interfere with contenteditable editing
When a MutationObserver is attached to a contenteditable element or its parent, the observer callbacks may interfere with editing performance. Frequent DOM mutations during typing can trigger many observer callbacks, causing lag or jank.
1 case
Tags: performance, chrome
ResizeObserver may cause layout shifts during contenteditable editing
When a ResizeObserver is attached to a contenteditable element, the observer may trigger during editing as content changes size. This can cause layout recalculations and visual jumps, especially when the contenteditable has dynamic height.
1 case
Tags: performance
Performance Foundations: Complexity, Memory, and Thrashing
Managing exponential slowdowns in large documents and browser-specific engine thrashing.
1 case
Comments & Discussion
Have questions, suggestions, or want to share your experience? Join the discussion below.