Arrow keys skip over emoji in contenteditable
OS: macOS 14.0 · Device: Laptop MacBook Pro · Browser: Chrome 120.0 · Keyboard: US
Open case →Scenario
Arrow keys skip over emoji in contenteditable
When using the left and right arrow keys in a `contenteditable` element that contains emoji, the
caret
Scenario ID
scenario-caret-movement-with-emoji
Details
When using the left and right arrow keys in a contenteditable element that contains emoji, the
caret sometimes jumps over entire emoji clusters instead of moving by a single visual position.
This scenario has been observed in multiple environments with similar behavior.
References
- Unicode TR29: Text Segmentation - Grapheme cluster rules
- Unicode TR51: Emoji - Emoji and ZWJ sequences
- Firefox Bug 435967: Caret movement with non-text nodes - Non-editable element navigation
- Stack Overflow: Chrome skips over empty paragraphs - Empty paragraph navigation
- WebKit Bug 106827: Down arrow doesn’t move caret with images - Image element navigation
- W3C: ContentEditable specification - Legal caret positions
- Stack Overflow: Emojis become question marks after re-render - Emoji handling issues
- Stack Overflow: Strange caret position in contenteditable - Caret positioning with spans
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-0005-arrow-keys-skip-emoji | macOS 14.0 | Laptop MacBook Pro | Chrome 120.0 | US | draft |
| ce-0025-caret-position-emoji-edge | Windows 11 | Desktop or Laptop Any | Edge 120.0 | US | draft |
Browser compatibility
This matrix shows which browser and OS combinations have documented cases for this scenario. Click on a cell to view the specific case.
| Browser | Windows | macOS |
|---|---|---|
| Chrome | — | |
| Edge | — |
Confirmed
Draft
— No case documented
Cases
Open a case to see the detailed description and its dedicated playground.
Arrow keys skip over emoji in contenteditable
OS: Windows 11 · Device: Desktop or Laptop Any · Browser: Edge 120.0 · Keyboard: US
Open case →Related Scenarios
Other scenarios that share similar tags or category.
Tags: caret, navigation
Arrow keys move by word instead of character when modifier is not pressed
In Chrome on Windows, arrow keys may move the caret by word instead of by character, even when no modifier keys are pressed. This makes precise cursor positioning difficult.
1 case
Tags: caret
Auto-scroll while typing in contenteditable
Browsers try to keep the caret visible by scrolling the editable container or the page. During rapid typing—especially near the bottom or right edge—scroll updates can lag, batch, or feel jarring, so the caret temporarily leaves the viewport or the view jumps unexpectedly.
3 cases
Tags: caret
Dark mode causes caret visibility and styling issues
When browser dark mode is enabled, contenteditable elements may experience invisible or poorly visible caret, inline style injection conflicts, background color issues, and form control styling problems. These issues are caused by missing color-scheme declarations and conflicts between browser-injected styles and custom CSS.
1 case
Tags: caret
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: caret
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
Comments & Discussion
Have questions, suggestions, or want to share your experience? Join the discussion below.