Bug 310592

Summary:

[macOS] Incorrect caret position in textarea with writing-mode: vertical-rl

Product:

WebKit

Reporter:

masa.tehu

Component:

HTML Editing

Assignee:

Nobody <webkit-unassigned>

Status:

NEW

Severity:

Normal

CC:

fantasai.bugs, karlcow, vitor.roriz, wenson_hsieh, zalan

Priority:

Version:

Safari 18

Hardware:

Mac (Apple Silicon)

OS:

macOS 15

See Also:

https://bugs.webkit.org/show_bug.cgi?id=288896

Attachments:

Description	Flags
Screen recording: macOS Safari 18.5 showing incorrect caret position in vertical-rl textarea	none
test case	none

masa.tehu

Reported 2026-03-23 19:05:48 PDT

Created attachment 478768 [details] Screen recording: macOS Safari 18.5 showing incorrect caret position in vertical-rl textarea **Summary** On macOS Safari 18.5, the caret (text cursor) is positioned incorrectly in a <textarea> element with `writing-mode: vertical-rl`. The caret appears at a wrong position when: - Clicking between characters - Pressing Enter to create a new line The same issue also occurs with contenteditable elements. This was fixed for iOS in Safari 18.5 (Bug #288896, commit d250e4b), but the issue persists on macOS Safari 18.5. **Steps to Reproduce** 1. Open the attached HTML file (vertical-rl-caret-bug.html) in macOS Safari 18.5. 2. Type some Japanese text in the textarea. 3. Click between characters in the textarea. 4. Or press Enter to create a new line. **Expected Result** The caret should appear at the exact position where the user clicked or where the new line was inserted. **Actual Result** The caret appears at a different position than where the user clicked or where the new line was inserted. See attached video for demonstration. **Environment** - macOS version: [your version] - Safari version: 18.5 **Related Bugs** - Bug #288896: REGRESSION(290387@main): [iOS] editing/caret/caret-position-vertical-rl.html is a constant failure - Commit d250e4b: Fix iOS caret positioning to use logical coordinates (changed point.x() to logicalPoint.x() in RenderText::positionForPoint) - Safari 18.5 release note: "Fixed some errors in finding the caret position from a click or tap on iOS in vertical writing modes" (#146512180) **Notes** - Tested with a minimal <textarea> with no JavaScript or additional CSS. The issue reproduces with only `writing-mode: vertical-rl` applied. - Chrome and Firefox on macOS do not have this issue. - The fix in commit d250e4b appears to have addressed this only for iOS, not for macOS. <html> <head> <meta charset="utf-8"> <title>vertical-rl caret position bug on macOS Safari</title> </head> <body> <h1>macOS Safari: vertical-rl caret position bug</h1> <p>Click between characters or press Enter to see incorrect caret positioning.</p> <textarea style="writing-mode: vertical-rl; width: 400px; height: 300px; font-size: 16px;"> </textarea> </body> </html>

Attachments
Screen recording: macOS Safari 18.5 showing incorrect caret position in vertical-rl textarea (965.93 KB, video/quicktime) 2026-03-23 19:05 PDT, masa.tehu	no flags	Details
test case (371 bytes, text/html) 2026-03-23 19:44 PDT, Alexey Proskuryakov	no flags	Details
View All Add attachment proposed patch, testcase, etc.

Alexey Proskuryakov

Comment 1 2026-03-23 19:44:18 PDT

Created attachment 478769 [details] test case Thank you for the report, I can reproduce with Safari 26.4. Attaching the test case for ease of reproducing. Side note (probably worth a separate bug): painting the text is also broken - pasting text into this textarea always results in incomplete painting.

Note You need to log in before you can comment on or make changes to this bug.