Touch events interfere with contenteditable focus on mobile
OS: iOS Ubuntu 22.04 · Device: Mobile Any · Browser: Safari 120.0 · Keyboard: System virtual keyboard
Open case →Scenario
Touch events interfere with contenteditable focus on mobile
On iOS Safari, touch events (tap, long-press) on a contenteditable region may not properly focus the element. The virtual keyboard may not appear, or focus may be lost unexpectedly.
mobile
Scenario ID
scenario-mobile-touch-behavior
Details
On iOS Safari, touch events (tap, long-press) on a contenteditable region may not properly focus the element. The virtual keyboard may not appear, or focus may be lost unexpectedly.
This scenario has been observed in multiple environments with similar behavior.
References
- Algolia Support: Autocomplete input focus on iPhone - User gesture requirements
- Stack Overflow: contenteditable div doesn’t focus on iPad - Focus timing issues
- ProseMirror Discuss: Can’t focus on iOS - iOS focus problems
- GitHub Gist: Trigger focus with soft keyboard dynamically - Dummy input workaround
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-0028-mobile-touch-focus | iOS Ubuntu 22.04 | Mobile Any | Safari 120.0 | System virtual keyboard | draft |
| ce-0038-mobile-zoom-on-focus | iOS Ubuntu 22.04 | Mobile Any | Safari 120.0 | System virtual keyboard | draft |
| ce-0046-mobile-double-tap-zoom | iOS Ubuntu 22.04 | Mobile Any | Safari 120.0 | System virtual keyboard | draft |
| ce-0053-mobile-selection-handles-overlap | Android Ubuntu 22.04 | Mobile Any | Chrome 120.0 | System virtual keyboard | 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 | Android | iOS |
|---|---|---|
| Chrome | — | |
| Safari | — | ce-0028-mobile-touch-focus ce-0038-mobile-zoom-on-focus ce-0046-mobile-double-tap-zoom 120.0, 120.0, 120.0 |
Confirmed
Draft
— No case documented
Cases
Open a case to see the detailed description and its dedicated playground.
Page zooms in when focusing contenteditable on mobile
OS: iOS Ubuntu 22.04 · Device: Mobile Any · Browser: Safari 120.0 · Keyboard: System virtual keyboard
Open case →Double-tap on contenteditable triggers page zoom
OS: iOS Ubuntu 22.04 · Device: Mobile Any · Browser: Safari 120.0 · Keyboard: System virtual keyboard
Open case →Selection handles overlap with content on mobile
OS: Android Ubuntu 22.04 · Device: Mobile Any · Browser: Chrome 120.0 · Keyboard: System virtual keyboard
Open case →Related Scenarios
Other scenarios that share similar tags or category.
Tags: mobile, focus, ios
contenteditable focus and caret issues on iOS
On iOS, contenteditable elements may become non-selectable or non-editable. Tapping on the element doesn't display the caret, preventing text input.
0 cases
Tags: mobile, touch, ios
Touch selection handles are difficult to use on mobile devices
On mobile devices, selecting text in a contenteditable region using touch is difficult. The selection handles are small and hard to grab, and the selection range may change unexpectedly when trying to adjust it.
1 case
Tags: mobile, focus
Input Events Fire on Focus/Blur in Chrome Android
In Chrome on Android, input events may fire when a contenteditable element gains or loses focus, even without content changes. This behavior can lead to unintended side effects in applications relying on input events for content modification detection.
1 case
Tags: mobile, ios
CSS backdrop-filter may cause rendering issues in contenteditable
When a contenteditable element has CSS backdrop-filter applied, rendering may be affected. Text may appear blurry, selection may not render correctly, and performance may be degraded, especially on mobile devices.
1 case
Tags: mobile, ios
enterkeyhint and inputmode affect Enter key behavior inconsistently
On mobile devices, the combination of enterkeyhint and inputmode attributes may affect Enter key behavior inconsistently on contenteditable elements. The Enter key may insert line breaks when it should perform an action, or vice versa.
1 case
Comments & Discussion
Have questions, suggestions, or want to share your experience? Join the discussion below.