Vant: Circle组件在移动设备上的显示出现偏移

[chenmf6]

Describe the bug
我的项目是基于vue+vant+postcss-pxtorem实现的h5页面。
postcss-pxtorem的rootValue设置为75.
在h5页面上使用Circle组件，设置size="1.4rem"，得到的结果如图1，van-circle__layer这一层出现了偏移。
检查vant的源码，发现对应的transform-origin设置成了固定的530px。
于是我在自己的代码里加上了这一段：
.van-circle__layer { transform-origin: 50% !important; }
加上之后，在chrome和苹果手机上显示正常。
但是在安卓手机上还是出现了偏移，如图2.
Screenshots

图1

图2

请问：
为什么vant的源码里面要将transform-origin设置成固定的尺寸？
怎样设置才能在安卓上正常显示？

Environment

• Device: 安卓Pixel2
• Browser: Chrome浏览器
• Vant Version: 1.3.4

[chenjiahan]

1. 对于 SVG 来说，内部的 transform-origin 设置成固定尺寸还是百分比，都不会影响 SVG 的缩放（viewBox 是固定的），当然这里用百分比更加合理，后续会优化下
2. 不确定安卓上是什么问题，建议看下你的安卓系统版本，以及项目 autoprefixer 配置是否对 webkit 前缀产生了影响

[chenmf6]

问题已经解决了。是跟postcss-pxtorem的设置有关。
在postcss.config.js中，在postcss-pxtorem的selectorBlackList里加上'van-circle__layer'，或者在propList里面加上'!transform-origin'就可以了。

[chenjiahan]

好的👌

[bing086]

👌很好

[chenjiahan]

已加入到官方示例仓库
https://github.com/youzan/vant-demo/blob/master/rem/vue.config.js

[wujun1995]

问题已经解决了。是跟postcss-pxtorem的设置有关。
在postcss.config.js中，在postcss-pxtorem的selectorBlackList里加上'van-circle__layer'，或者在propList里面加上'!transform-origin'就可以了。

调完，拿了同事的手机测了一下 安卓机还是不行咧

[wujun1995]

.van-circle__layer { transform-origin: 50% !important; }

刚刚看了postcss-pxtorem的文档 把小写px改成PX 可以忽略转换成rem
.van-circle__layer { transform-origin: 530PX 530PX !important}这样做 拿同事的机子看了一下 阔以乐

[aiweiwe]

666