Looking for software experts?
Need an expert advice on software development? Need consulting work done in time and at high standards? Tremend has the right solution for you.

We can provide expertise in:
  •    » high traffic and complex content website infrastructures using Java, PHP or .NET. More here ...
  •    » mobile applications for iPhone, Android or J2ME. More here ...

For an enquiry, send an email to contact [at] tremend [dot] ro.

Cursor disappears in Firefox

January 22nd, 2007 by Marius Hanganu in HTML, Javascript

Firefox has this annoying problem of the cursor caret becoming invisible sometimes. For example, when showing up a div, the textboxes inside that div don’t have the cursor. You can edit them, but you can’t really know where exactly the cursor is. This can be very frustrating when editing texts in input boxes.

The mouse doesn’t actually dissapear, as one friend cleverly noticed. If you move your div around, you’ll find it blinking somewhere underneath. This has nothing to do whatsoever with z-index, but with div’s scrolling as some people point out .

So basically, to make your caret visible, you’d have to replace your div’s style from something like:

overflow: auto

to

overflow: hidden;



This helped me get rid of the invisible cursor problem. I guess other overflow values will work as well, except for auto.

br />

technorati tags:, , , , , ,

DZoneGoogle ReaderYahoo MessengerRedditEmailDelicious

Related posts

  • Firefox overflow hidden prohibits event firing on other elements
    It seems that for Firefox, the style overflow hidden stops firing onmousemove or onmouseover events. Not sure if there is any standard for this behavior and if Firefox implements it or not. My guess is...
  • Firefox Extensions
    To make your browsing experience a pleasure and also benefit from a great development tool, Firefox is key. Here is my list of must-have extensions: - DOM Inspector - inspect browser dom, really good...
  • DWR, JSON and IE6: beware keywords
    Spent quite a bit of time investigating an "IE bug". What happened: a particular AJAX request would work fine in Firefox but nothing would happen in IE6. Obvious steps were to monitor request and response...
  • A href vs onclick – performance test – IE6 vs IE7 vs FF3 vs FF2 vs Chrome vs Opera vs Safari
    While optimizing some HTML code, I recently came across the question: when rendering anchors, which of the href and onclick are rendered quicker by the browsers. To find out, I created two files, each...
  • Spreadsheet dojo widget
    Update3: We're back to our own hosting. Update2: Razvan Dragomirescu was kind enough to mirror the spreadsheet widget. Click here to access the demo. Thanks Razvan! Update: Due to high traffic the demo...
.

24 Responses

  1. harry Says:

    Great news!!! Thanks!

  2. rawiweb Says:

    I saw the cursor vanishs if you have position:fixed inserted into style
    if you put this code below into a page the cursor is gone in FF

    div{
    position:absolute;
    top:0;left:0;
    width:100%;
    height:100%;
    }
    html>body>div{ /*hidden from IE*/
    position:fixed: /*this is the problem*/
    }

    some formfields….

  3. Deb Says:

    Omigod. This blog post has saved me hours of work. Thank you thank you thank you.

  4. James Torrence Says:

    And done nothing for me. First page in google for my search terms “cursor disappears in firefox”.

  5. Sameers Says:

    I have been fighting with this from days and found on many places that div with style=overflow:hidden or auto works. But didn;t worked for me. Atlast, I tried positio:fixed on div which wraps textbox and it works. At the same time, if you set the textbox style = position:fixed, it works.

    I got positioning problems now, which may be wasting more time of mine. Lets see if any other solution available.

    Sameers

  6. R.Amirdha Gopal Says:

    Thanks Sameers,
    Applying position:fixed to the div worked.

    Though it causes some positioning problem, it solved the problem to a good extend.

    Happy Coding,
    Gopal.

  7. Yuri Subach Says:

    Similar problem happens w/ GWT and FireFox. If you have TextBox element with cursor inside and make

    element.setVisible(false);

    Cursor disappears and never return until page reload. Workaround for this thing is to remove focus before disabling element:

    element.setFocus(false);
    element.setVisible(false);

  8. PR Says:

    Thanks for posting this… My 2 cents: I had a similar problem: if a I had a div with an input field that had focus – then I hid that Div, my cursor would disappear for good.

    If, before hiding the div, I removed focus from the input (input.blur()) everything works fine…

  9. Kvj Says:

    Hi Sameers,

    The positon:fixed method worked fine for me.
    Thanks

    K

  10. Dan Says:

    The position: fixed was the reliable way of fixing it for me too – the overflow: auto wasn’t consistent

  11. Victor Says:

    If position:fixed causes your text to go funny, use position:relative

    thanks

    V

  12. Sam Allen Says:

    I tried position:fixed to no avail.

    I have a div with overflow:hidden, holding a table with search boxes. IE6 and only IE6 I cant get teh cursor to show.

    Put position fixed on the div and on the inputs directly – no luck. Any other thoughts?

  13. Sam Allen Says:

    I tried position:relative to no avail.

    I have a div with overflow:hidden, holding a table with search boxes. IE6 and only IE6 I cant get teh cursor to show.

    Put position relative on the div and on the inputs directly – no luck. Any other thoughts?

  14. DOM-ligaror Says:

    I tried every Fix – none id working.
    This being a very old and annoying Bug – has Mozilla ever commented on it?

  15. Peter Says:

    Here you get some info!
    https://bugzilla.mozilla.org/attachment.cgi?id=98624&action=edit

  16. hugo Says:

    For me the only thing that worked was to warp the table that contained all the inputs with

    “overflow:hidden” did not work.

    hopefully this is consistent, not sure though

  17. hugo Says:

    For me the only thing that worked was to warp the table that contained all the inputs with
    \
    “overflow:hidden” did not work.

    hopefully this is consistent, not sure though

  18. hugo Says:

    Sorry, I am having problems to post this, lets see if it works now

    For me the only thing that worked was to warp the table that contained all the inputs with
    <div style="overflow-x:hidden">
    “overflow:hidden” did not work.

    hopefully this is consistent, not sure though

  19. Rafael Says:

    worked for me. : )

    Thanks.

  20. B.M.Karlsson Says:

    You should be awarded the Nobel prize for this. Thank you!

  21. Bivek Says:

    Thanks Hugo your solution worked for me..

    Hugo said:
    For me the only thing that worked was to warp the table that contained all the inputs with

    “overflow:hidden” did not work.

    Thanks again.

  22. Dan Says:

    There are several issues with the caret disappearing in Fx, all with slightly different causes.

    The one I’ve been battling with is where you have a fixed-position element under an input, and none of the ‘normal’ fixes seem to work.

    I’ve created a JS solution which fixes that issue, although it brings with it a rendering bug, so it might not be right for everyone:

    http://www.codecouch.com/2008/10/fixing-a-disappearing-caret-in-firefox/

    Dan

  23. Dude Says:

    disable add on java console 6.0.22 go to tools> add ons

  24. Mary Says:

    The css and js fixes, described above didn’t work for me.

    I have div container for a textbox, this div has style “display: none”;
    I add special class “visible” to the wrapper tag of this div to make the div visible;
    That works great in all browsers, except for FF. In FF cursor caret becomes invisible.

    The solution that worked for me is:

    div.textbox_container {display:none;}
    . visible div.textbox_container {display:block;}
    div.textbox_container, x:-moz-any-link {display:block; visibility:hidden; height:0px; overflow:hidden;}
    . visible div.textbox_container, x:-moz-any-link {display:block; visibility:visible; height:auto;}

    Notes:
    The first and second lines work for all browsers, except for FF;
    The third and forth lines work in FF only

    .style, x:-moz-any-link {…} – css hack for FF only

    It’s important to use this style for FF only, in my case, applying this style for all browsers caused bug in Opera, similar with the one, that I tried to rid in FF. I’m not quite sure about all other browsers.
    I have found this css hack for FF only, just recently, so I couldn’t be sure about how reliable it is. Though, it works right in my case.

Leave a Comment

Please note: Comment moderation is enabled and may delay your comment. There is no need to resubmit your comment.