Text insertion cursor (caret) appears above other

Question

When giving focus to a text input in a mobile browser (tested on iOS Safari and Chrome), the text caret appears over the top of any divs placed on top.

Here is a quick, simple example: http://jsfiddle.net/XQf8N/

Here is a screenshot of the effect:

What would be the best way of working around this?

I tried the answer here: JQuery Mobile: focused input text doesn't respect z-index, appearing above everything else but it did not work.

UPDATE After some more digging I also tried to do $("input").blur(); when toggling the menu div but that doesn't seem to work on the mobile device either, it does remove focus on the desktop though.

UPDATE 2 May be related to this: iPad Safari does not fire blur event, although if I blur the textbox in a setTimeout, not in the event listener, the textbox does blur successfully. See this fiddle: http://jsfiddle.net/XQf8N/17/

UPDATE 3 Trying to pass input to a hidden textbox doesn't seem to work either http://jsfiddle.net/XQf8N/23/

UPDATE 4 Realised I didn't look into hiding the cursor as suggested - http://jsfiddle.net/XQf8N/24/ - this just hides the mouse pointer when hovering over the textbox, doesn't do anything to the caret

UPDATE 5 Suggestion to disable the textbox, this doesn't lose focus and doesn't close the keyboard http://jsfiddle.net/XQf8N/27/

UPDATE 6 This solution: https://stackoverflow.com/a/7761438/1061602 does not work within the event listener, see fiddle: http://jsfiddle.net/XQf8N/29/

UPDATE 7 This solution: https://stackoverflow.com/a/6473076/1061602 does not work either, same result as disabling the text box

UPDATE 8 Blurring the textbox within a function that is bound using knockout works: http://jsfiddle.net/XQf8N/33/

Any ideas what is wrong with the original event listener? Hopefully this troubleshooting will be helpful to someone if they have the same issue.

Answer 1

OK, not sure what has happened with the fiddle, but this one works: http://jsfiddle.net/XQf8N/33/

This is the same, except instead of manually listening for the events and then calling blur() on the textbox, the blur() is fired from a knockout binding.

As I am using knockout, I may as well blur the textbox in the knockout event binding instead.

Answer 2

I was running into the same issue when my side bar was opening on top of a form (I could still see the blinking cursor over the side bar). I ended up solving it through this answer: Position fixed not working in mobile browser

I used -webkit-backface-visibility: hidden; on my position: fixed element and set the parent to be position: relative. I read that -webkit-backface-visibility could be "promoting things into a new stacking context and therefore forcing a different render". I'm not sure which positioning your element has, but I hope this is relevant and helpful.

Answer 3

You should try executing this code document.activeElement.blur(); right after the menu is opened.

Answer 4

I was able to use visibility: hidden; for my solution.