jQuery Selectric bug on iPad

Question

I use jQuery Selectric plugin for customize select's.

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

If i open select on iPad device my left column move up

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

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

UPD: test at browserstack iOS < 7 - no problem, iOS 8.3 - have some problem, iOS 9.1 have this bug

Answer 1

It's bug iOS 9, include in iOS 8, but in 9 version include partly.

Bug with input, with attribute readonly="readonly". Selectric use hide input:

What happen:

1. If click on selectric-wrapper start method _open.
2. Method _open set focus on hide input.selectric-input. It make selectric plugin and i don't know why. May be, more simple add listeners for keystrokes on a hidden element. And handle such events when an item has focus. Why input? If you use another element, then pressing the arrow keys, we will also scroll the document itself. Because, use input , although I could be wrong. Maybe better input for e-readers, ie, used it to enhance accessibility.

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

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

Ie when the focus input immediately rid of him, because on iPads impossible to move through the list using the keyboard, the functionality should not be compromised.