Firefox’s Disappearing Cursor

So I discovered this not-so-handy bug in Firefox today related to filling in information into a HTML form. Sometimes when the user is about to enter data, the text entry field’s cursor caret becomes invisible.

It’s a bug I’ve seen before but had just put down to my browser set-up, but today after seeing it happen on a colleague’s machine, I decided to investigate what was actually going on. It turns out I was not alone in having this problem, it is a known bug.

Basically, the problem seems to be caused by the scrolling properties of the DIV elements that an input field is contained in. There’s no z-index or cursor CSS fix - instead you need to use one of the two following solutions.

• Create a new DIV element to surround the input which has an overflow of hidden. E.g:

<div style="overflow:hidden"><input type="text" id="example" /></div>

(Inline style used for demonstration - use a style sheet if you can)

• Set the CSS property position of the container DIV to fixed. E.g:

div.container { position:fixed }

So now your cursor problem is resolved.

Sure your layout’s probably screwed and needs some reworking, but at least the cursor blinks! In all seriousness, this is a decent enough workaround should you consider the problem one that has to be solved. The good news is that Firefox 3 no longer has this problem, so hopefully this is a soon to be outed gotcha.

Tags: Bug, Caret, Cursor, Disappear, Firefox, Invisible, Missing