Vant: [Bug Report] IOS13在使用Dialog 弹出框时弹出框会从旁边弹出而不是直接从中间弹出

Created on 5 Nov 2019 · 9Comments · Source: youzan/vant

设备 / 浏览器

ios 13.1.3

Vant 版本

2.2.11

Vue版本

2.6.10

重现链接

http://energy.eybond.com/#/accout

描述问题

IOS13在使用Dialog 弹出框时弹出框会从旁边弹出而不是直接从中间弹出进入链接后点击订单购物车或者收货地址弹出Dialog或者新建的一个测试demo里面就放了个按钮引入了Dialog 用ios13来测试时Dialog弹出框从右边往中间很僵硬的弹出来,而在别的版本和安卓则没有这个问题

Source

KevinyLin

Most helpful comment

.van-dialog {
transform: translate(-50%,-50%);}就解决了，亲测有效!!!!它原来是translate3d,改成2d就行了，但是动画。。。。

PPPenny on 22 Nov 2019

👍5 ❤1

All 9 comments

未复现此问题，我用的 iOS 13.2

你可以试下官方示例是否能复现

chenjiahan on 5 Nov 2019

我遇到了这个问题 ,同样是13.1的版本

表现比较奇怪,像是弹窗的transform 一开始没有生效,然后突然生效恢复到正常位置.

GRJser on 20 Nov 2019

@GRJser 可以试下是不是只在 13.1 出现，如果是的话，就是系统 bug 了

chenjiahan on 21 Nov 2019

同样遇到，13.2同款bug

PPPenny on 22 Nov 2019

@GRJser 可以试下是不是只在 13.1 出现，如果是的话，就是系统 bug 了
13.2 经常出现这个问题，从右下角移动过到中间来

PPPenny on 22 Nov 2019

.van-dialog {
transform: translate(-50%,-50%);}就解决了，亲测有效!!!!它原来是translate3d,改成2d就行了，但是动画。。。。

PPPenny on 22 Nov 2019

👍5 ❤1

.van-dialog {
transform: translate(-50%,-50%);}就解决了，亲测有效!!!!它原来是translate3d,改成2d就行了，但是动画。。。。

awsome,tks

GRJser on 25 Nov 2019

出现这种情况是translate3d(-50%,-50%, 0) 在动画期间并没有生效，动画结束后恢复默认样式时才应用transition，而且这种情况是偶发的，猜想可能是渲染的快慢导致的，所以我覆盖默了认样式，加了个delay基本就没有上述问题了。
.van-dialog { transition-delay: 0.2s; }