Fixing Disappearing Cursors in Firefox
The past few days I have been debugging the User Interface for Simpli5. Today I wrestled with a particularly frustrating issue in which cursors were completely vanishing from inputs in Firefox. While it did not affect the interaction of the input, I could still manipulate the text, it did cause quite an annoyance.
Here is a quick example which demonstrates the problem:
The problem is caused by the change in Firefox’s current rending frame. Setting overflow:scroll on our #Container div causes Firefox to use that div as it’s current rending frame. Thus, the cursor is being rendered on the #Container, not on the #Dialog div, which contains the input. Effectively, the input is covering its own cursor.
The fix is a simple change in CSS inheritance. Without setting an overflow setting on the #Dialog div, we are inheriting the overflow:scroll from #Container. By setting the #Dialog div’s overflow setting back to it’s default overflow:auto we are changing Firefox’s rendering frame to the #Dialog div, thus bringing back our cursor.
Here is the fixed example:
Thankfully, Mozilla has fixed this problem in Firefox 3.
3 Comments »
Search
Popular Posts
- 50 Tips To A User Friendly Website
- My Favorite Pomodoro Timers
- How to build a Gantt Chart with the Google Charts API
- Why Flash is Mostly Bad
- Sharing the Grid
- 10 Tips to Better Google Wave Conversations
- The difference between User Research and Usability Testing?
- How to Label Submit Buttons
- Our New Development Process
- Paper Prototyping vs. Balsamiq Mockups


Seth Keiper
This seems to be “fixed” in FF3. Great post!
May 6, 2008
Nadine
Okay, so I have no idea how to change the settings. Do you think you could explain it like you were talking like a toddler… not literally. How is it possible to change this in the firefox settings?
April 7, 2009
Murty
Great Post..
But for flash inputtexts its not working.
April 29, 2009