Scenario

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.

mobile

Scenario ID

scenario-touch-selection-mobile

Edit on GitHub

Details

References

iOS WebKit Quirks: Viewport scaling - Font size and zoom issues
Stack Overflow: Disable auto zoom in input text tag Safari iPhone - Font size recommendations
Stack Overflow: Disable elements selection and resizing - Selection control

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-0017-touch-selection-mobile	iOS Ubuntu 22.04	Mobile Any	Safari 120.0	System virtual keyboard	draft

Cases

Open a case to see the detailed description and its dedicated playground.

Touch selection handles are difficult to use on mobile devices

OS: iOS Ubuntu 22.04 · Device: Mobile Any · Browser: Safari 120.0 · Keyboard: System virtual keyboard

Open case →

Related Scenarios

Other scenarios that share similar tags or category.

Tags: mobile, touch, ios

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.

4 cases

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

Tags: mobile, ios

inputmode attribute does not affect virtual keyboard on mobile

The `inputmode` attribute, which should control the type of virtual keyboard shown on mobile devices, does not work on contenteditable regions in iOS Safari. The keyboard type cannot be controlled.

1 case

Tags: mobile, 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

Comments & Discussion

Have questions, suggestions, or want to share your experience? Join the discussion below.