[youzan/vant]Circle组件在移动设备上的显示出现偏移

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

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

Environment

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

chenmf6

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

chenjiahan

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

chenmf6

好的?

chenjiahan

?很好

bing086

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

chenjiahan

问题已经解决了。是跟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}这样做拿同事的机子看了一下阔以乐

wujun1995

666

aiweiwe

[youzan/vant]Circle组件在移动设备上的显示出现偏移

回答

相关问题