iPad上的jQuery Selectric bug

Question

我使用jQuery Selectric插件来自定义选择。

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

如果我在iPad设备上打开选择，我的左栏会向上移动

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

请帮忙。在这里演示：http://output.jsbin.com/seleyi

UPD：在browserstack iOS上进行测试＆lt; 7 - 没问题，iOS 8.3 - 有一些问题，iOS 9.1有这个bug

Answer 1

它是iOS 9的错误，包含在iOS 8中，但在9版本中包含部分内容。

带有input的错误，属性为readonly="readonly"。 Selectric使用隐藏输入：

发生了什么：

1. 如果点击selectric-wrapper开始方法_open。
2. 方法_open将重点放在隐藏input.selectric-input上。它制作selectric插件，我不知道为什么。可能更简单，为隐藏元素上的击键添加侦听器。并在项目具有焦点时处理此类事件。为什么input？如果您使用其他元素，然后按箭头键，我们也将滚动文档本身。因为，使用输入，虽然我可能是错的。也许更好的输入电子阅读器，即用它来增强可访问性。

当焦点转向输入时，尽管它是只读的，iOS（我想是这样）试图为键盘分配空间。我可以建议一个简单的解决方法：

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

当焦点输入立即摆脱他时，因为在iPad上无法通过键盘移动列表，功能不应该受到损害。