Selection range is incorrect when selecting across multiple elements

When selecting text that spans across multiple HTML elements (e.g., <p>, <div>, <span>) in a contenteditable region, the selection range may not accurately reflect the visual selection. The Selection and Range APIs may return incorrect boundaries.

Observed Behavior

• In Edge/Chrome, the selection range boundaries may not match the visual selection.
• The Range.startOffset and Range.endOffset may be incorrect when spanning element boundaries.

Reproduction Steps

1. Create a contenteditable div with nested elements: <p>First</p><p>Second</p>.
2. Select text that spans from the middle of the first paragraph to the middle of the second paragraph.
3. Use JavaScript to inspect the Selection object.
4. Observe that reported positions mismatch the visual highlight.

Related Cases

• ce-0033: multi-element selection mismatch

References

• MDN: Selection API - Official Selection API documentation
• MDN: Range.commonAncestorContainer - Common ancestor container documentation
• Stack Overflow: Highlight select multiple divs with ranges - Multi-element selection
• Stack Overflow: Set cursor after span element - Offset normalization
• MDN: Selection.rangeCount - Multiple ranges support
• Mozilla Groups: Selection behavior discussion - Firefox selection improvements
• Medium: ContentEditable click event mystery - Range intersection issues