JQuery Selectric Error on iPad

Question

I am using jQuery Selectric plugin to configure select.

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

If I open select on the iPad, my left pillar will move up

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

Please help with this. Demo here: http://output.jsbin.com/seleyi

UPD test: in the iOS browser <7 - not a problem, iOS 8.3 - there is a problem, iOS 9.1 has this error

Answer 1

This is an iOS 9 bug, included in iOS 8, but partially included in version 9.

Error with input , with attribute readonly="readonly" . Selective input for hidden input:

What will happen:

• If you click the selectric-wrapper method start _open .
• The _open method _open focus to hide input.selectric-input . He makes a custom plugin, and I don't know why. It may be easier to add listeners to press keys on a hidden element. And handle such events when the subject has focus. Why input ? If you use another element and then press the arrow keys, we also scroll the document itself. Because, use input, although I may be wrong. Perhaps the best entry for electronic readers, i.e. Used it to increase accessibility.

And when the focus comes to the input, despite the fact that it is read-only, iOS (I think so) tries to allocate space for the keyboard. I can advise a simple way:

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

Those. when the focus input gets rid of it right away, because on iPads it’s impossible to navigate through the list using the keyboard, the functionality should not be compromised.