Case ce-0089 · Scenario scenario-css-contain

CSS contain property may affect contenteditable selection

OS: Windows 11 Device: Desktop or Laptop Any Browser: Chrome 120.0 Keyboard: US Status: draft
css-contain selection chrome windows

Phenomenon

When a contenteditable element or its parent has the CSS contain property, selection behavior may be affected. Selection may not extend beyond the contained element, and caret movement may be restricted.

Reproduction example

  1. Create a contenteditable div with contain: layout style paint.
  2. Try to select text that spans beyond the element boundaries.
  3. Try to move the caret outside the element.
  4. Observe selection and caret behavior.

Observed behavior

  • In Chrome on Windows, CSS contain may restrict selection.
  • Selection may not extend beyond contained boundaries.
  • Caret movement may be limited.
  • Selection ranges may be invalidated.

Expected behavior

  • CSS contain should not affect contenteditable selection.
  • Or, the behavior should be clearly documented.
  • Selection should work normally within contained elements.

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: Windows 11
Device: Desktop or Laptop Any
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.