Vant: 在ios微信浏览器日期选择控件无法正常选择日期

Created on 28 Feb 2019 · 23Comments · Source: youzan/vant

日期选择控件无法拖动，也就是无法正常选择年月日。在IOS微信浏览器里

Device: iphone 6s 11.4.1
Browser: 微信浏览器
Vant Version: 1.6.5

能触发滑动，但是触发位置异常。在ios的微信浏览器下。

如果可以，请尽快解决。
如果不能及时发布版本，请给现在的解决方案。

Source

quan01994

Most helpful comment

给再次看到这个issues的大佬们
这个bug可通过css解决
在自己项目全局css额外加几句这个代码即可
(我的vant版本是1.5.x,其他版本vant理同)
(因为我是从1.1.x升上来的)
(很多以前1.1.x的utils在1.6.x上没有了)
(所以没升级到最新的1.6.x)

.van-picker-column{
  position relative
  z-index 1
  &:before{
    width 100%
    height 100%
    position absolute
    top 0
    left 0
    content ''
  }
  &>ul{
    z-index -1
    position relative
  }
}

643104191 on 4 Mar 2019

👍10

All 23 comments

是ios版本的问题，ios12 是没有问题，ios11有问题

quan01994 on 28 Feb 2019

没有人管这个问题吗？还是就我出现了这个问题。

quan01994 on 1 Mar 2019

我现在也是遇到这个问题
ios11.2.1

643104191 on 1 Mar 2019

@643104191 我现在找到一个折中的办法，只要最里面的ul的宽度不要为默认的100%，稍微窄一点，,就可以再旁边一列触发，但这也是临时方法。。。

quan01994 on 1 Mar 2019

建议看下是不是这个系统问题：https://developers.weixin.qq.com/community/develop/doc/00044ae90742f8c82fb78fcae56800

chenjiahan on 2 Mar 2019

@chenjiahan 并不是微信的浏览器，而是在ios11自带的浏览器也无法实现日期的上下滚动。

quan01994 on 3 Mar 2019

是里面的ul 覆盖了外面的div，导致无法触发外部div的拖动事件，在iOS12上没有问题，只有在ios11上才发现该问题。

quan01994 on 3 Mar 2019

@chenjiahan 你用一个ios11的iphone去访问到官网上的datetimepicker页面看一下，能不能拖动，我这里是无法拖动的。

quan01994 on 3 Mar 2019

👍1

建议看下是不是这个系统问题：https://developers.weixin.qq.com/community/develop/doc/00044ae90742f8c82fb78fcae56800

@chenjiahan 这个bug和键盘/input没任何关系啊,我都怀疑你是机器人,瞎关闭问题
(好多问题都是用这个bug去回答,然后把这个问题关掉)

643104191 on 4 Mar 2019

好奇怪，上一次测，怎么都无法拖动，这一次测，就行了。我也没有改任何代码，就是测试机隔了两天。。。

quan01994 on 4 Mar 2019

好奇怪，上一次测，怎么都无法拖动，这一次测，就行了。我也没有改任何代码，就是测试机隔了两天。。。

@quan01994 你没更新微信或者你的代码?(或者微信热更新了一波浏览器相关代码?)

643104191 on 4 Mar 2019

.van-picker-column{
  position relative
  z-index 1
  &:before{
    width 100%
    height 100%
    position absolute
    top 0
    left 0
    content ''
  }
  &>ul{
    z-index -1
    position relative
  }
}

643104191 on 4 Mar 2019

👍10

@643104191 我确实是从1.5升级到1.6 就遇到了这个bug。。。。

quan01994 on 4 Mar 2019

@643104191 我确实是从1.5升级到1.6 就遇到了这个bug。。。。

@quan01994 反正现在我通过css解决了,不管了

643104191 on 4 Mar 2019

如果一个 bug 昨天能复现，今天又正常了，那大概率不是 vant 的问题
上面的代码太过 hack，暂无计划加到 vant 中，PR 先 close 了
从事件冒泡的机制来说，应该不存在里面的 ul 覆盖了外面的 div 这种说法

chenjiahan on 4 Mar 2019

我也遇到这个BUG，一直解决不了。只有IOS会这样
这个BUG应该跟safari内核有关。初次打开微信（或者杀掉进程重新进微信）进去页面就不会有问题的，但过一会就不行。

rason560 on 20 Mar 2019

@quan01994 @643104191 @rason560 经排查，这个问题是 Vue 近期升级引入的一个 bug，在最新的 2.6.10 版本里得到修复，建议升级到 [email protected] 版本试下

chenjiahan on 20 Mar 2019

👍1

我也遇到这个BUG，一直解决不了。只有IOS会这样
这个BUG应该跟safari内核有关。初次打开微信（或者杀掉进程重新进微信）进去页面就不会有问题的，但过一会就不行。

我现在其他非picker的组件,如,swiper,表现确实和你说的一样初次打开微信进页面不会有问题,过一会就不行了

升级了2.6.10也无济于事

643104191 on 28 Mar 2019

我也遇到这个BUG，一直解决不了。只有IOS会这样
这个BUG应该跟safari内核有关。初次打开微信（或者杀掉进程重新进微信）进去页面就不会有问题的，但过一会就不行。

我现在其他非picker的组件,如,swiper,表现确实和你说的一样初次打开微信进页面不会有问题,过一会就不行了

升级了2.6.10也无济于事

我其实并没选择降级。而是直接参考你的CSS hack了。我觉得相对于降级牺牲vue的版本，不如直接先CSS hack吧。
不过话说回来，既然降级都无法解决。那就不是vue版本问题了。

rason560 on 28 Mar 2019

@chenjiahan 现在的vue版本就是2.6.10。ios11.4复现不出来很难复现。但还是有用户反馈说滑动不了