There are many issues with Firefox hiding the caret (cursor) in text fields which have focus. There are various fixes, depending on the specifics of your issue, which mostly involve adding a style of “overflow:auto” to the input or container in question.
There is one case that doesn’t appear to have a fix, other than upgrading to Firefox 3: The cursor (caret) in a text input turns invisible when it is over a fixed element. I’ve known about this problem for a while, and have tried many solutions that fixed similar issues, but they never seemed to work for this specific one.
I’ve found a solution that works, but it has 2 drawbacks:
- It causes rendering errors on the fixed element when scrolling (almost as if the fixed element is scrolling as well)
Using the test harness below, you can see the problem and the fix. I’ve included my test background image after the code, to make the rendering problem very obvious.
There is a small flicker when the fix is enabled, although this could potentially be fixed by hooking into the DOMContentLoaded event and running the fix before the background image is loaded.