Cas ce-0092 · Scénario scenario-css-filter

CSS filter may affect contenteditable performance

OS: macOS 14.0 Appareil: Desktop or Laptop MacBook Pro Navigateur: Chrome 120.0 Clavier: US Brouillon
css-filterperformancechromemacos

Cette page n'a pas encore été traduite

Le contenu original en anglais est actuellement affiché. Nous apprécierions votre contribution à la traduction.

Phenomenon

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.

Reproduction example

  1. Create a contenteditable div with filter: blur(2px) brightness(1.2).
  2. Type text rapidly.
  3. Observe typing lag or jank.
  4. Try to select text and observe responsiveness.
  5. Compare performance with a contenteditable without filters.

Observed behavior

  • In Chrome on macOS, CSS filters may cause performance issues.
  • Typing may lag or stutter.
  • Selection updates may be slow.
  • The UI may become unresponsive during rapid editing.

Expected behavior

  • CSS filters should not significantly impact editing performance.
  • Or, filters should be optimized for contenteditable use cases.
  • Performance should remain acceptable with filters applied.

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.