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 <7测试 - 没问题,iOS 8.3 - 有一些问题,iOS 9.1有这个bug

Answer 1

这是iOS 9的bug，包含在iOS 8中，但在9版本中包含部分。

错误与input，与属性readonly="readonly"。Selectric使用隐藏输入：

发生什么事：

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

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

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

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