javascript - iPad上的jQuery Selectric错误

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

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

如果我在iPad设备上打开select，我的左列会向上移动

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

请帮忙。此处演示:http://output.jsbin.com/seleyi



UPD:在浏览器堆栈iOS 测试-没问题，iOS 8.3-有问题，iOS 9.1有此错误

最佳答案

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

具有input和属性readonly="readonly"的错误。 Selectric使用隐藏输入:



发生什么事:

如果单击selectric-wrapper启动方法_open。

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

当焦点集中在输入上时，尽管它是只读的，但iOS(我认为是)会尝试为键盘分配空间。我可以建议一个简单的解决方法:

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

即，当焦点输入立即摆脱他时，因为在iPad上无法使用键盘在列表中移动，因此不应损害功能。