解决transform导致弹窗字体模糊问题
-
造成原因
项目中使用vant的popup组件时,发现里面元素的字体模糊,经过查询资料查看其样式发现原来是transform造成的。在设置 transform时 div的宽度或者高度不是偶数的时,移动50%之后,像素点并不是整数,出了小数,和显示像素没有对上,所以导致了字体模糊。
.van-popup--center { top: 50%; left: 50%; transform: translate3d(-50%,-50%,0); }
-
解决方案
-
将元素的宽高改为偶数
-
换一种水平垂直居中的方法(我采用的解决方案)
.searchForDate { z-index: 1000; width: 90%; height: 11rem; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; transform: translate3d(0,0,0); }