Vant: 2.0.1版本Area 省市区选择联动失败

[tkggusraqk]

Describe the bug 描述问题
2.0.1版本Area 省市区选择联动失败，滑动过程中无法联动，点击 可以

Screenshots 截图

Environment 环境

• Device: 红米手机（note 1lte)
• Browser:
• Vant Version: 2.0.1

Reproduce 复现步骤

[chenjiahan]

是只有红米手机会出现吗，安卓版本是多少

[kmb1010]

华为手机也不能联动，安卓版本4.4.4。
vant版本2.0.1有此问题，1.6.23无此问题。

[chenjiahan]

@ystarlongzi 能否帮忙跟进下这个问题~ 看起来和 Picker 的改动有关

[ystarlongzi]

好的，我来跟进下

[ystarlongzi]

@tkggusraqk @kmb1010 方便录个视频嘛 ☕️

[kmb1010]

@tkggusraqk @kmb1010 方便录个视频嘛 ☕️

这边有个视频，github好像不能上传视频？

[kmb1010]

我发到你邮箱 zhangzilong.[email protected]？ @ystarlongzi

[ystarlongzi]

我发到你邮箱 zhangzilong.[email protected]？ @ystarlongzi

可以的，发我这个邮箱吧，多谢了

[kmb1010]

已发送，请查收

------------------ 原始邮件 ------------------
发件人: "流采"[e-mail];
发送时间: 2019年6月28日(星期五) 中午1:42
收件人: "youzan/vant"[e-mail];
抄送: "Koreyoshi、"[e-mail];"Mention"[e-mail];
主题: Re: [youzan/vant] 2.0.1版本Area 省市区选择联动失败 (#3538)

我发到你邮箱 zhangzilong.[email protected]？ @ystarlongzi

可以的，发我这个邮箱吧，多谢了

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or mute the thread.

[ystarlongzi]

嗯呢，已收到

[ystarlongzi]

@kmb1010 能麻烦用你那个手机做以下操作嘛

1. 访问 https://codepen.io/ystarlongzi/pen/xopKNw?editors=1010 ，然后分别点击两个按钮，等字体变成红色后，截图回复一下

2. 访问官网 https://youzan.github.io/vant/mobile.html#/zh-CN/area 的 demo，看下是否可以联动的

辛苦了 🍉🍉

[kmb1010]

1.字体都没有变红
2.打开官网空白

------------------ 原始邮件 ------------------
发件人: "流采"[e-mail];
发送时间: 2019年6月28日(星期五) 下午3:00
收件人: "youzan/vant"[e-mail];
抄送: "Koreyoshi、"[e-mail];"Mention"[e-mail];
主题: Re: [youzan/vant] 2.0.1版本Area 省市区选择联动失败 (#3538)

@kmb1010 能麻烦用你那个手机做以下操作嘛

访问 https://codepen.io/ystarlongzi/pen/xopKNw?editors=1010 ，然后分别点击两个按钮，等字体变成红色后，截图回复一下

访问官网 https://youzan.github.io/vant/mobile.html#/zh-CN/area 的 demo，看下是否可以联动的

辛苦了 🍉🍉

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or mute the thread.

[kmb1010]

---原始邮件---
发件人:"流采"[e-mail]
发送时间:2019年6月28日(星期五) 下午3:00
收件人:"youzan/vant"[e-mail];
主题: [youzan/vant] 2.0.1版本Area 省市区选择联动失败 (#3538)

@kmb1010 能麻烦用你那个手机做以下操作嘛
访问 https://codepen.io/ystarlongzi/pen/xopKNw?editors=1010 ，然后分别点击两个按钮，等字体变成红色后，截图回复一下

访问官网 https://youzan.github.io/vant/mobile.html#/zh-CN/area 的 demo，看下是否可以联动的

辛苦了
－
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or mute the thread.

[chenjiahan]

官网空白是因为文档引入了一个搜索库，在低版本系统不支持，可以忽略

[ystarlongzi]

问题已经定位到了，晚点我提个 pr

测试机信息

原因如下

1. window.getComputedStyle()在测试机上返回的值不包含 transform 属性，导致抛错。可以考虑使用 webkitTransform 替代，在高、低版系统都会包含这个属性

https://github.com/youzan/vant/blob/e08bea7577c3aea269c0d920edff1c1a08e901da/src/picker/PickerColumn.js#L18-L23

1. 当 transition-property: transform 时，测试机在动画结束后不会触发 transitionEnd 事件，改为 transition-property: all 后，可以正常触发事件，原因未知

https://github.com/youzan/vant/blob/e08bea7577c3aea269c0d920edff1c1a08e901da/src/picker/PickerColumn.js#L228-L233

[chenjiahan]

@ystarlongzi 好的，辛苦了，transform 那个，可以先取 transform，没有的话再取 webkitTransform

[ystarlongzi]

调试过程中还发现 picker 在测试机上滑动时，mask 会「消失」掉，会导致下图的滑动过程中选项文字突然变黑

解决方案是对如下的 mask 类添加 backface-visibility: hidden; 属性

https://github.com/youzan/vant/blob/e08bea7577c3aea269c0d920edff1c1a08e901da/src/picker/index.less#L63-L75

[chenjiahan]

已在 2.0.4 版本发布

[kmb1010]

thanks