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

Description GU Yiling 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

Comment 1 Ahmad Saleem 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.

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

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

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

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

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


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