CSS isolation property may affect contenteditable stacking context
OS: macOS 14.0 · Device: Desktop or Laptop MacBook Pro · Browser: Safari 17.0 · Keyboard: US
Open case →Scenario
CSS isolation property may affect contenteditable stacking context
When a contenteditable element has the CSS isolation: isolate property, it creates a new stacking context. This may affect how selection handles and IME candidate windows are positioned relative to the element.
other
Scenario ID
scenario-css-isolation
Details
When a contenteditable element has the CSS isolation: isolate property, it creates a new stacking context. This may affect how selection handles and IME candidate windows are positioned relative to the contenteditable.
References
- MDN: isolation - isolation property documentation
- Runebook: CSS isolation - isolation documentation
- MDN: Understanding CSS z-index stacking context - Stacking context guide
- MDN: The stacking context - Stacking context details
- W3C EditContext: Character bounds - IME positioning specification
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-0090-contenteditable-with-css-isolation | macOS 14.0 | Desktop or Laptop MacBook Pro | Safari 17.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: safari, macos
CORS restrictions may affect contenteditable in cross-origin iframes
When a contenteditable element is inside a cross-origin iframe, CORS restrictions may prevent certain operations. Accessing the contenteditable from the parent frame may be blocked, and some editing operations may be restricted.
1 case
Tags: safari, macos
File API drag and drop does not work in contenteditable
When trying to drag and drop files into a contenteditable element, the File API may not work as expected. File drop events may not fire, or file content may not be accessible.
1 case
Tags: safari, macos
IntersectionObserver may affect contenteditable visibility detection
When an IntersectionObserver is used to detect when a contenteditable element becomes visible or hidden, the observer may not fire correctly during editing. Changes to content size or position during editing may not trigger intersection updates as expected.
1 case
Tags: safari, 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: safari, macos
Page Visibility API may affect contenteditable during tab switches
When a page with a contenteditable element becomes hidden (tab switch, minimize), the Page Visibility API may affect editing state. Focus may be lost, and composition may be interrupted.
1 case
Comments & Discussion
Have questions, suggestions, or want to share your experience? Join the discussion below.