title: Firefox contenteditable cursor issue
body: <p>I've got a <code>contenteditable</code> div that, when empty (only the placeholder text is present per the CSS below), the user is able to click the right-hand side of the div and place the cursor there (see screenshot). Once the cursor is there, the user is unable to type at all. The issue only happens in Firefox (I'm in 33.1.1). The issue does not happen in any other browser.</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div class="content-editable form-textarea font-face-frank"
      placeholder="Type something here..." contenteditable="true"
      ng-model="form.message" ng-class="form.fontName" strip-br="true" required&gt;&lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>.content-editable {
      outline-width: 0;
      min-height: 1em;
      max-height: 300px;
      line-height: 1em;
      overflow-y: scroll;
      display: inline-block;
      width: 100%;
      font-size: 44px;
      padding: 10px;
  }
  .content-editable:empty:before {
      content: attr(placeholder);
  }
  </code></pre>
  
  <p><strong>What I've Tried:</strong></p>
  
  <ul>
  <li>Placing a space, <code>&lt;br&gt;</code> in the div - fixes issue, but then the placeholder text is not displayed;</li>
  <li>Adding a <code>&amp;nbsp;</code>, <code>&lt;br&gt;</code> via <code>.content-editable:empty {}</code>; the placholder text remains, but the cursor issue is not addressed.</li>
  </ul>
  
  <p><strong>Repro of the Issue</strong></p>
  
  <ul>
  <li><a href="http://jsfiddle.net/pmmenneg/02y17u2t/" rel="noreferrer">JSFiddle</a></li>
  </ul>
  
  <p><img src="https://i.stack.imgur.com/zSkLD.png" alt="Screencap of cursor position"></p>
  
  <p><strong>Update</strong></p>
  
  <p>Removing the <code>content: attr(placeholder);</code> css directive resolves the issue, not that doing that allows me to display the 'placeholder' text in the contenteditable element.</p>