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.

One thing to watch out for as a Web Developer is windowed elements. Even if the website you create looks as though it works perfectly fine in older browsers, you may have missed checking the placement of windowed elements.

What are windowed elements?
In versions 6 and below of Internet Explorer, some of the HTML components used are ‘borrowed’ from standard windows components, and as a result they are drawn differently. Microsoft decided to call these elements ‘windowed’ elements, which a cynic would say hides a bug as a ‘feature’. Happily, Internet Explorer 7 onwards does not contain any windowed elements.