May 1, 2008
By: Josh Walsh in Code
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.
Comments
Seth Keiper » May 6, 2008
This seems to be “fixed” in FF3. Great post!