contenteditable behavior differs when inside an iframe
OS: Windows 11 · Device: Desktop or Laptop Any · Browser: Edge 120.0 · Keyboard: US
Open case →Scenario
contenteditable behavior differs when inside an iframe
When a contenteditable region is inside an iframe, its behavior may differ from when it's in the main document. Selection, focus, and event handling may be inconsistent.
other
Scenario ID
scenario-contenteditable-iframe
Details
When a contenteditable region is inside an iframe, its behavior may differ from when it’s in the main document. Selection, focus, and event handling may be inconsistent.
References
- AllowFullscreen: Cross-origin restrictions in iframes - Same-origin policy
- Stack Overflow: Tracking focus on cross-origin iframe - Focus detection
- XJavaScript: Blocked autofocusing in cross-origin subframe - postMessage communication
- Stack Overflow: How to detect a click inside of an iframe cross-domain - Click detection
- Stack Overflow: Detecting when an iframe gets or loses focus - Focus polling
- Stack Overflow: Selection change event in contenteditable - selectionchange event
- GitHub Gist: iOS Safari iframe focus issues - iOS-specific workarounds
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-0048-contenteditable-in-iframe | Windows 11 | Desktop or Laptop Any | Edge 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: contenteditable
contenteditable="false" on child elements is not respected consistently
When a contenteditable region contains child elements with contenteditable="false", the behavior is inconsistent. Some browsers allow editing within these elements, while others correctly prevent it.
1 case
Tags: contenteditable
contenteditable in table cells causes layout issues
When a contenteditable region is inside a table cell (`<td>`), editing the content may cause layout issues in Firefox. The table may resize unexpectedly or the cell may overflow.
1 case
Tags: iframe
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: edge
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: iframe
contenteditable behavior is restricted inside sandboxed iframes
When contenteditable elements are inside an iframe with the sandbox attribute, their behavior may be restricted or broken depending on which sandbox tokens are enabled. Without allow-scripts or allow-same-origin, many contenteditable features (like rich text editing, clipboard access, or event handling) may not work properly.
0 cases
Comments & Discussion
Have questions, suggestions, or want to share your experience? Join the discussion below.