Mystery of the disappearing cursor/caret

2007-02-14 08:30:00

Okay, so it's not really such a mystery, it just sounded good as the title.

I'm catching up on posting some of the stuff we trip on while working on Cosmo, and this time around it's a Firefox bug -- when working with absolute-positioned, z-indexed divs that contain text inputs, sometimes the flashing cursor/caret in the text box mysteriously disappears. The box has focus, and you can type -- text appears, but you have no feedback as to where you're typing.

I can remember seeing this problem starting some years back, in the original Mozilla browser.

At the time I had started doing all my development work in Mozilla, but all our users were naturally using IE (except those cold-dead-fingers dudes at the time still clinging to Netscape 4.08, and the art-department freaks trying to log in with the new Safari browser). We had some pop-up interface widgets that used a multi-tab strategy to break the form up, and some of the time I'd lose the caret in text inputs in some chunks of the form.

Since I was the only one using Moz (in fact, I can recall my supervisor at one point huffily demanding I pull up a 'real browser' for some bit of testing), it was just an annoyance to me and that was it.

Well as you can see by the Mozilla Bugzilla report for this bug, this screwy behavior was first reported in September of 2002, and it's still not fixed in any Mozilla release. Probably back then it wasn't such a big deal, but as time has passed, the annoyance factor on it has increased substantially. You can almost feel the angst in the post by one commenter, from back in November of 2005:

This is an incredibly painful bug and not only makes applications look bad, but also makes FireFox look bad. It will become more and more visible as AJAX applications start proliferating. Please please please fix this bug

The good news is that it's actually fixed. The bad news is that it's fixed in Firefox trunk, which means no one actually gets the aforementioned fix until fall or winter of this year.

Of course now I know what actually causes it -- a scrollable div behind the one with the text inputs (check the test case, you can see the caret emerge as you type past the edge of the underlying div) -- and it looks like there are some reasonable workarounds, so we won't have to play "guess where you're typing" in the next Cosmo release.


This is the blog for Matthew Eernisse. I currently work at Yammer as a developer, working mostly with JavaScript. All opinions expressed here are my own, not my employer's.


Previous posts

All previous posts ยป

This blog is a GeddyJS application.