Why is the caret invisible in a contenteditable with position:relative?

Question

When a contenteditable element has position: relative and a background color, the caret is invisible when it's placed in that element. Here's an example:

.bug {
  position: relative;
  background-color: lightgrey;
}

<div contenteditable>
  This has caret
  <span class="bug">no caret here?!</span>
  this has caret
</div>

My first thought was "this is a browser bug", but it's the exact same bug on Chrome and Firefox!

What causes the caret to disappear? And is there a workaround?

Answer 1

Don't know the exact cause of the issue but you can fix it in multiple ways.

My previous explanation (maybe wrong) :

This isn't a bug, you put the background color on a <span> tag (in position:relative) inside a contenteditable div element and so the span is on top of the contenteditable div.

I still think is related to the z-index since we can see on the image below the red background on top of the Chrome focus border:

Remove position:relative

Removing position:relative of the <span> fix the issue:

.no-bug {
  background-color: red;
}

<div contenteditable>
  This has caret
  <span class="no-bug">This has caret !</span>
  this has caret
</div>

Adding a z-index to the <span> element

Adding a negative z-index also fix the issue:

.no-bug {
  background-color: red;
  position: relative;
  z-index: -10;
}

<div contenteditable>
  This has caret
  <span class="no-bug">This has caret !</span>
  this has caret
</div>

Adding a display: inline-block to the <span> element

Adding a display: inline-block (or display: block) fix the issue:

.no-bug {
  background-color: red;
  position: relative;
  display: inline-block;
}

<div contenteditable>
  This has caret
  <span class="no-bug">This has caret !</span>
  this has caret
</div>

Others Stackoverflow related questions

• Edit cursor not displayed on Chrome in contenteditable
• contenteditable cursor doesn't appear