Text insertion cursor (caret) appears above other elements in mobile browser

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.