Reply To: Transparent text, visible caret?

[Nathan K]

Here’s a rough codepen demo: http://codepen.io/nathank/pen/LEBddV

There is a textarea that perfectly overlays a div, with all of the same dimensions/fonts/etc. On Chrome the text in the textarea is transparent, and the caret is still visible. On Firefox, however, the text in the textarea is still visible; it is just sitting perfectly on top of the text below. I’m trying to figure out how to make the textarea text transparent in Firefox, while keeping the caret visible.

You won’t notice the problem in Firefox unless you make a small change. In codepen, at the top of the JS pane, set the delay = 300 instead of 30. Now place your caret at the beginning of the textarea and press enter. You will notice in Firefox that the text in the text area advances to the next line before the text in the div does, producing a ghosting effect. This is because there is a slight delay in updating the div. In Chrome, there is no ghosting effect because the text in the textarea is transparent.