Phenomenon
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.
Reproduction example
- Create a contenteditable div with
transform: scale(0.8) translateX(50px). - Select text in the contenteditable.
- Observe the position of selection handles.
- Observe the caret position during editing.
- Compare visual position with actual selection.
Observed behavior
- In Edge on Windows, CSS transforms may cause selection handle misalignment.
- Caret position may appear offset.
- Selection handles may not align with selected text.
- Touch selection on mobile may be affected.
Expected behavior
- CSS transforms should not affect selection handle positioning.
- Caret should appear in the correct visual position.
- Selection handles should align with selected text.