position:absolute and overflow:auto causing text box cursor to disappear

When several DHTML layers on top of each other all contain an input field, and one of these layers has overflow: auto the cursor in the other input boxes becomes invisible.

Test page Workaround is not included
Reported by: Murray Hopkins.

Mozilla | Reported on 17 June 2005.

This site is no longer maintained. I’m sorry, but it’s just too much work for too little return. You can continue to browse old bug reports, though.

Search reports by browser:

Atom RSS


(Add your own)

1 Posted by sime534 on 7 July 2005 | Permalink

yes, we've noticed this exact same problem with an iframe on one of a stack of layered div's. the cursor disappears in the exact same area the iframe is positioned.

2 Posted by Riftor on 10 August 2005 | Permalink

Yes I am having the same problem, even when the other layer is not initially position on it, but is moved over. Also appears to happen with overflow:scroll

3 Posted by Helen Emerson on 30 August 2005 | Permalink

I found a bug related to this issue in the mozilla bug database. There's a workaround for it there.


4 Posted by spawn on 20 June 2006 | Permalink

same problem when used iframe and input placed over with position absolute

5 Posted by Edemilson Lima on 16 November 2006 | Permalink

I made many tests in Firefox, with and without iframes, using many DIVs and so. What I found is that the caret cursor disappear when a text field is inside a DIV that is on top of another DIV with a lower z-index, but only if it was created before in the document. So, the z-index for each DIV must match the same order they are in the document or the cursor will not show when they overlap. I am using DIVs like popups, in this case the only good workaround I found was changing the DIV overflow to hidden with an onmouseout event and to auto or scroll with an onmouseover.

6 Posted by Melon on 14 December 2006 | Permalink

Cursor also disappears when I hide an input field by giving it "display: none" while focus is on this input. An easy workaround is to either set focus to something else before hiding the input, or by simply removing focus from the input with the blur() method.

7 Posted by Pete Fearn on 30 April 2008 | Permalink

I used position: fixed on the actual INPUT tag and that seemed to fix my problem