Bug 248345

Summary:

Input caret is not properly sized for empty contenteditable element with ::before content and display: inline-block

Product:

WebKit

Reporter:

GU Yiling <justice360>

Component:

HTML Editing

Assignee:

Nobody <webkit-unassigned>

Status:

RESOLVED DUPLICATE

Severity:

Normal

CC:

ahmad.saleem792, akeerthi, megan_gardner, rniwa, wenson_hsieh, zalan

Priority:

Version:

Safari 16

Hardware:

Mac (Intel)

OS:

macOS 13

Attachments:

Description	Flags
The caret fills the vertical space and is misplaced	none

GU Yiling

Reported 2022-11-25 08:44:42 PST

Created attachment 463731 [details] The caret fills the vertical space and is misplaced For an empty element with contenteditable="true", if it also has display: inline-block and a ::before pseudo element, when we focus the element to start editing, we'll notice that the input caret fills the whole vertical space and is misplaced. See the reproduction: https://jsbin.com/gemedokovu/1/edit?html,css,js,output

Attachments
The caret fills the vertical space and is misplaced (62.61 KB, image/png) 2022-11-25 08:44 PST, GU Yiling	no flags	Details
View All Add attachment proposed patch, testcase, etc.

Ahmad Saleem

Comment 1 2022-11-26 02:08:36 PST

I am not able to reproduce this bug in Safari Technology Preview 158 and it shows small caret size and also blinking before # similar to Chrome Canary 110 and Firefox Nightly 109. It is broken in Safari 16.1 though.

Ahmad Saleem

Comment 2 2022-11-26 02:13:54 PST

This might have fixed it - https://github.com/WebKit/WebKit/commit/11d258f9db329fa814a7a5466d2a9bae81a6025d

GU Yiling

Comment 3 2022-11-26 04:12:26 PST

Yes I can confirm it's already fixed in Safari Technology Preview Release 158. Thank you!

Ahmad Saleem

Comment 4 2022-11-26 07:33:28 PST

*** This bug has been marked as a duplicate of bug 135914 ***

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