CSS contain property may affect contenteditable selection
OS: Windows 11 · Device: Desktop or Laptop Any · Browser: Chrome 120.0 · Keyboard: US
Open case →Scenario
CSS contain property may affect contenteditable selection
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.
selection
Scenario ID
scenario-css-contain
Details
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.
References
- W3C CSS Containment Module - contain property specification
- MDN: contain - contain property documentation
- MDN: Using CSS containment - Containment guide
- W3C ContentEditable: Legal caret positions - Caret position specification
- Stack Overflow: Prevent caret placement after element - Caret restriction techniques
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-0089-contenteditable-with-css-contain | Windows 11 | Desktop or Laptop Any | 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: selection, windows
CSS transform may cause selection handles to appear in wrong position
When a contenteditable element has CSS transforms applied (translate, scale, rotate), the selection handles and caret may appear in incorrect positions. The visual position may not match the actual selection position.
1 case
Tags: selection
Browser zoom causes caret and selection positioning issues
When the browser is zoomed (or content is scaled via CSS transforms), caret position and text selection in contenteditable elements can become inaccurate. Clicking at a certain position places the caret elsewhere, and selection highlights may not match the visual selection.
1 case
Tags: chrome
Text caret is invisible on position:relative elements
When editing content inside an element with `position:relative`, the text caret (cursor) is completely invisible. Text can be typed and appears in the editor, but there's no visual feedback of where the insertion point is located.
2 cases
Tags: chrome
Typing certain characters makes cursor jump on Chrome Mobile
On Chrome Mobile for Android, typing certain punctuation characters (commas, colons, semicolons, quotes, etc.) in the middle of a word causes the cursor to jump to the end of the word instead of staying at the insertion point.
2 cases
Tags: chrome
Caret jumps to end when deleting character next to non-editable element
When deleting the last character before a non-editable "pill" or tag element (contenteditable="false") in a contenteditable div in Chrome, the caret (cursor) jumps to the end of the entire contenteditable div instead of staying adjacent to the remaining content.
1 case
Comments & Discussion
Have questions, suggestions, or want to share your experience? Join the discussion below.