contenteditable: cursor disappears before span with background color
Categories
(Core :: Layout: Text and Fonts, defect, P3)
Tracking
()
People
(Reporter: tbosch, Unassigned)
Details
User Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36
Steps to reproduce:
Create a contenteditable div that contains a span which has a set background color:
<div contenteditable=true>
Before<span style="background-color: #ffff">Inside</span> After
</div>
Place cursor at start at move before the span via arrow keys. I.e. so that the cursor is before the "I" of "Inside"
JsFiddle: https://jsfiddle.net/5y0x6drs/
This is on an ubuntu linux using Firefox Quantum 60.6.0esr.
Actual results:
The cursor disappears.
Expected results:
The cursor should not disappear.
|
Reporter | |
Comment 1•5 years ago
|
||
Also moving the cursor one char to the right makes it visible again.
Adding mix-blend-mode: difference reveals that the cursor is there, but uses the color of the background.
|
||
Updated•5 years ago
|
|
|
Reporter | |
Comment 2•5 years ago
|
||
My use case: Show a typeahead in the contenteditable at the cursor position via a <span>.
This bug always hides the cursor before this kind of typeahead as the typeahead has a background color.
|
|
Reporter | |
Comment 3•5 years ago
|
||
Ups, sorry, I accidentally overwrote your triaging changes while submitting my comment :-(
|
||
Updated•5 years ago
|
|
||
Updated•5 years ago
|
|
||
Updated•2 years ago
|
|
||
Comment 4•4 months ago
|
||
Sounds like a caret painting issue. Although I don't understand what hides/overlaps the caret. In my understanding, caret is painted on the topmost layer except outline, but the color is color property's computed value. Therefore, that may conflict with background-color or color at element boundary.
Ideally, we could re-paint text with background color or opposite color of color after painting caret with making outside caret rect, though.
Description
•