Vant: [Bug Report] iOS 13 Popup 组件与 Field 组件一起使用时，输入框聚焦后 DOM 不弹起与光标消失

Created on 9 Oct 2019 · 15Comments · Source: youzan/vant

设备 / 浏览器

iphone xr

Vant 版本

2.2.6

Vue版本

2.6.10

重现链接

https://2phtr.csb.app/

描述问题

Popup组件与Field组件一起使用时，输入框聚焦后DOM不会弹上去，也没有光标出现。

💩 browser quirks

Source

peng20017

Most helpful comment

日期组件再ios13系统上嵌入popup也无法显示

xw9480 on 25 Oct 2019

👍2

All 15 comments

应该是在IOS13下有这个问题，测试了IOS10，没有问题

peng20017 on 9 Oct 2019

看起来是 iOS 13 的一个 bug，transform 元素内无法获取到光标。

apple developer 有人反馈同样的问题，但暂时没有得到回应：
https://forums.developer.apple.com/thread/123967

chenjiahan on 9 Oct 2019

我遇到了 ios 13.0.0 下,可能出现Diaog 里点击input ,出现光标,但是没有唤起键盘的问题.

GRJser on 16 Oct 2019

日期组件再ios13系统上嵌入popup也无法显示

xw9480 on 25 Oct 2019

👍2

日期组件再ios13系统上嵌入popup也无法显示

我这边也遇到这个问题，不过应该是ios13的事件机制有变化，我用的vue，事件绑定改为@click.native后就好了

eastwillie on 28 Oct 2019

看起来是 iOS 13 的一个 bug，transform 元素内无法获取到光标。

apple developer 有人反馈同样的问题，但暂时没有得到回应：
https://forums.developer.apple.com/thread/123967

@chenjiahan @peng20017
感觉跟transform单独的关系不大，因为直接在Popup中使用input是可以正常显示光标的。
根据排查，现在的解决方案就是：在不影响你样式的前提下，将van-cell和van-cell__value的overflow: hideen;改成overflow: visible;即可正常显示光标。

LLawlight on 29 Oct 2019

👀1

@LLawlight 感谢大佬提供解决方案，经测试，Popup下只有一个Field组件时这种改动可以有效的弹出光标，但是发个一个规律问题，在Field组件上方加入元素，当Field组件被下移到一定位置后，不再显示光标（例如我在Field组件上方加入一个p标签时，仍然能显示光标，让加入两个p标签时，光标又不显示了）。

peng20017 on 29 Oct 2019

@peng20017
.van-popup--center{
transform: unset !important;
position: fixed !important;
top: 50%;
left: 50%;
margin-left: -40vw;
margin-top: -50%;
}
应该是transform 引起的问题，挡住了最后几个弹框，结合@LLawlight 大佬的方案，可以暂时解决弹起和光标的问题

xiaoyierle on 30 Oct 2019

apple在IOS13.2中修复了我上次说的问题

peng20017 on 31 Oct 2019

/deep/.van-popup {
position: absolute !important;
}
/deep/.van-popup--center {
transform: unset !important;
position: fixed !important;
top: 50%;
left: 50%;
margin-left: -40vw;
margin-top: -50%;
}
两个属性配合使用可以解决