title: Render text on top of other text
body: <p>I've got an element with some text in. Above that I have another element with exactly the same text in. I'd like for the text inside the top element to render over the top of the other text. However, when I run it, you can get noticeably different results whether the bottom element is shown or not.</p>
  
  <p><a href="https://jsfiddle.net/ag5nobc9/" rel="nofollow noreferrer">https://jsfiddle.net/ag5nobc9/</a></p>
  
  <p>This isn't too bad with black text, but starts to look bad if the top element's text is red or styled in some other way.</p>
  
  <p>If you set opacity: 0, the problem disappears, but then the caret and text selection for the bottom element are no longer rendered by the browser, which hampers usability. I tried setting the font-weight on the bottom element but it doesn't seem to actually change the text in any way.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.fixFontAttributes {
    font-size: 12px;
    font-family: "Monaco","Menlo","Ubuntu Mono","Droid Sans Mono","Consolas",monospace;
    color: red;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;h3&gt;With textarea&lt;/h3&gt;
  &lt;div style="position:relative"&gt;
    &lt;textarea class="fixFontAttributes" style="z-index:0;background-color:transparent;border:0px none;margin:0px;padding:0px"&gt;some text&lt;/textarea&gt;
    &lt;div class="fixFontAttributes" style="position:absolute;top:0px;left:0px;z-index:1;pointer-events:none;padding:0px;border:0px none;margin:0px"&gt;
      &lt;pre class="fixFontAttributes" style="margin:0px;padding:0px;border:0px none;"&gt;some text&lt;/pre&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;h3&gt;Without textarea&lt;/h3&gt;
  &lt;div style="position:relative"&gt;
    &lt;div class="fixFontAttributes" style="position:absolute;top:0px;left:0px;z-index:1;pointer-events:none;padding:0px;border:0px none;margin:0px"&gt;
      &lt;pre class="fixFontAttributes" style="margin:0px;padding:0px;border:0px none;"&gt;some text&lt;/pre&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Ideally I'd like a cross-browser solution to this or at least to understand what the problem is- Chrome produces the exact same problem as Firefox in this regard.</p>
  
  <p>Just for complete clarity, what I'd like is for the text to appear normal - that is, as if the textarea didn't exist. It should be sharp and clear, not slightly blurry.</p>
  
  <p>I've observed that if you simply render the div twice, the problem is lessened. It seems that the browser doesn't render the div's text with 100% opacity, even if you set <code>opacity: 1</code>, or it renders it with subpixel differences or something. It's still... thicker, somehow, but the colour is better.</p>
  
  <p><a href="https://i.stack.imgur.com/jpKMe.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jpKMe.png" alt="enter image description here"></a></p>
  
  <p>Edit: It actually seems to occur regardless of which elements are being used, e.g. a pair of spans exhibits the exact same behaviour as a pre and a textarea.</p>