Firefox sets wrong caret position contentEditable with :before

Question

playground

This is a simplified version of my problem.
seems like I cannot put a positioned pseudo element inside a contentEditable and yet have the caret posi

Answer 1

For me this was only a problem when the box was empty. So I seeded it with a <br>:

  $("[contenteditable='true']").on('focus', function(){
    var $this = $(this);
    $this.html( $this.html() + '<br>' );  // firefox hack
  });

  $("[contenteditable='true']").on('blur', function(){
    var $this = $(this);
    $this.text( $this.text().replace('<.*?>', '') );
  });

More info here: https://bugzilla.mozilla.org/show_bug.cgi?id=550434

Answer 2

There is a problem when you put the :after element to absolute. I can not figure out why. But if you just place it relative the problem is gone.

I've updated your fiddle: http://jsfiddle.net/NicoO/Lt3Wb/1/

Here is the new CSS (with some experimental additions)

$pad:10px;

div{ 
    padding:$pad; 
    border:1px solid #CCC;
    height:120px;
    position:relative; 

 &:before
 { 
     position:relative;
     color:#999;
     content:"Write a comment..."; 
 }   
}

div:focus
{
    border-color: red;
}

div:not(:empty):before{
    display: none;
}

The only problem that remains is, that you can focus behind the text of the :before element. That'll be why you wanted it absolute. Interessting also: If you put the pseudo element to float: left; it shows the same behaviour as on position:absolute;.

Update

When you are forced to use absolute on peseudo elements, there seems to be only one solution at the moment. Define another padding for the box as long as it is empty and focused. Playground: http://jsfiddle.net/NicoO/Lt3Wb/5/

$pad:10px;
#test
{ 
    padding: $pad; 
    border:1px solid #CCC;
    height:120px;
    position:relative; 
    overflow: hidden;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;    

    &:empty:focus
    {
        padding: #{($pad*2)+6} $pad; 
    }

    &:before 
    { 
        position:absolute;
        color:#999;
        top: $pad;
        left: $pad;
        content: "Leave a comment"
    }   
}

Answer 3

One work around of this problem is to wrap the content-editable inside a DIV and give to this DIv a fixed height.

That is, if you have a configuration like this :

<div id="wrapper">
    <div contentEditable></div>
</div>

Then the CSS can be the following :

#wrapper {
  width: 240px;
  height: 70px;
  margin: 0 20px 0;
  overflow-y: auto;
  overflow-x: hidden;
}

#wrapper div[contenteditable=true] {
  width: 100%;
  min-height: 35px; /* Not mandatory */
  padding: 8px;
}