IME composition shows Pinyin in table cells on iOS Safari
OS: iOS 16+ · Device: Mobile (iPhone/iPad) Any · Browser: Safari 16+ · Keyboard: Chinese (IME) - iOS Chinese Input
Open case →Scenario
IME composition shows Pinyin in table cells on iOS Safari
Visual view of how this scenario connects to its concrete cases and environments. Nodes can be dragged and clicked.
Each row is a concrete case for this scenario, with a dedicated document and playground.
| Case | OS | Device | Browser | Keyboard | Status |
|---|---|---|---|---|---|
| ce-0235-chinese-ime-pinyin-table-ios-safari-en | iOS 16+ | Mobile (iPhone/iPad) Any | Safari 16+ | Chinese (IME) - iOS Chinese Input | draft |
Open a case to see the detailed description and its dedicated playground.
OS: iOS 16+ · Device: Mobile (iPhone/iPad) Any · Browser: Safari 16+ · Keyboard: Chinese (IME) - iOS Chinese Input
Open case →Other scenarios that share similar tags or category.
Comprehensive system for managing IME (Input Method Editor) composition state across different browsers and IME implementations, including state tracking, event normalization, and cross-platform consistency.
When using IME to input CJK text in heading elements (H1, H2, etc.) in WebKit browsers, pressing Space to confirm composition causes both the raw Pinyin buffer AND the confirmed characters to appear together.
During IME composition or in certain browser/IME combinations, the beforeinput event may have a different inputType than the corresponding input event. For example, beforeinput may fire with insertCompositionText while input fires with deleteContentBackward. This mismatch can cause handlers to misinterpret the actual DOM change and requires storing beforeinput's targetRanges for use in input event handling.
The selection (window.getSelection()) in beforeinput events can differ from the selection in corresponding input events. This mismatch can occur during IME composition, text prediction, or when typing adjacent to formatted elements like links. The selection in beforeinput may include adjacent formatted text, while input selection reflects the final cursor position.
When browser translation features (like Google Translate) are activated, they manipulate the DOM by replacing text content and injecting elements. This can break contenteditable functionality, causing cursor positioning issues, event handling problems, and IME composition failures.
Have questions, suggestions, or want to share your experience? Join the discussion below.