Bug 248345 - Input caret is not properly sized for empty contenteditable element with ::before content and display: inline-block
Summary: Input caret is not properly sized for empty contenteditable element with ::be...
Status: RESOLVED DUPLICATE of bug 135914
Alias: None
Product: WebKit
Classification: Unclassified
Component: HTML Editing (show other bugs)
Version: Safari 16
Hardware: Mac (Intel) macOS 13
: P2 Normal
Assignee: Nobody
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2022-11-25 08:44 PST by GU Yiling
Modified: 2022-11-26 07:33 PST (History)
6 users (show)

See Also:

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 an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.
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 ***