7

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

enter image description here

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

sglazkov
  • 1,046
  • 1
  • 10
  • 38
  • 1
    `100vh` → `100%` : http://output.jsbin.com/hiyewotiqo – blex Feb 27 '16 at 11:18
  • @blex it help in this example, but not on my site, i make new demo, here you can catch it if select place in bottom of page http://jsbin.com/seleyi/edit?output http://prntscr.com/a8k00x – sglazkov Feb 27 '16 at 11:53
  • @blex i add demo and picture in question – sglazkov Feb 27 '16 at 12:01
  • 1
    In ipad2 Safari i do not see the problem – silviagreen Feb 27 '16 at 14:05
  • @silviagreen you right, now test at browserstack iOS < 7 - no problem, iOS 8.3 - have some problem, iOS 9.3 have this bug – sglazkov Feb 27 '16 at 14:21
  • 1
    iOS 9.3 is beta and released on January 14, 2016 -- https://en.wikipedia.org/wiki/IOS_9 – Tasos Mar 06 '16 at 01:42
  • and according to this you cant even use the Beta versions unless you are a developer -- https://support.apple.com/en-us/HT203282 -- so its not released an update – Tasos Mar 06 '16 at 01:48
  • @Tasos thank you it's my make a mistake, i mean iOS 9.1 – sglazkov Mar 06 '16 at 09:53
  • 2
    no probs. so by the sounds of it with latest IOS updates (iOS 8.3 - have some problem, iOS 9.1 have this bug) the issue is getting worse and worse -- there should be another update soon so maybe they wll fix that issue by then – Tasos Mar 06 '16 at 15:14

1 Answers1

3

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:

enter image description here

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.

sglazkov
  • 1,046
  • 1
  • 10
  • 38