I use jQuery Selectric plugin to customize select

$('select').selectric({ disableOnMobile: false });

If I open select on the iPad my left column is with position: fixed; rises up

 .left-column { position: fixed; left: 0; top: 0; width: 200px; height: 100%; background: #F00; z-index: 100; }

enter image description here

Demo here: http://output.jsbin.com/seleyi Tested in browserstack iOS <7 - no problem, iOS 8.3 - some problems, iOS 9.1 there is this bug

    1 answer 1

    This is a bug of iOS 9, in my opinion it stretches from iOS 8, but came partially in version 9. If possible, you need to make a bug report. The bug is with input , which has the attribute readonly="readonly" . Selectric uses hidden input : Scrin

    What's happening:

    1. When you click on selectric-wrapper , the _open method _open .
    2. The _open method _open focus to hidden input.selectric-input . I did not understand why this is done. It may be easier to hang the handlers for pressing the keys on the hidden item. And you can handle such events when the element is in focus. Why input ? If you use another element, then when you press the arrow keys, we will also scroll the document itself. Therefore, we used input , although I could be wrong. Maybe input better for readers, i.e. used it to increase accessibility.

    And when the focus comes to input , despite the fact that it is readonly , iOS (I think so) is trying to allocate space for the keyboard. I can advise a simple workaround:

     $(".selectric-input[readonly]").on("focus", function(evt) { this.blur(); });

    Those. with the focus immediately get rid of him, because It’s impossible to move through the list using the keyboard, the functionality should not be broken.

    • It works! Thank! - sglazkov
    • @sglazkov, does it work or not? - skubarenko
    • @sglazkov Although I see you transferred my answer to stackoverflow in English. Then it is not clear why the “acceptance of the answer” was canceled - skubarenko
    • I wanted to gain pluses in karma for both you and me, but oh well, many thanks again! Excellent, detailed answer! - sglazkov
    • @sglazkov, and I already thought that the solution found another. Well, and the rating of the question / answer for the Russian stack is already normal, it is unlikely that they will be hit. Yes, and the problem is rare. By the way, you will most likely follow this behavior, so if you fix the bug, unsubscribe. - skubarenko