transform导致模糊bug

项目中用到了弹窗居中,有些弹出正常,有些弹出就模糊。这就比较奇怪了,一样的样式,为啥会出不同的结果呢?

css水平居中是有很多办法的,项目里面用的是这样的居中方式:

position: absolute;
left: 50%;
transform: translateX(-50%);

然后一点一点的去掉样式,定位到是transform导致的!用搜索引擎查了下,果然不止我一个人有问题,看来有解决方案了。

原来出现模糊的原因是因为元素的高度、宽度中有奇数, 使用类似translate(-50%,-50%)之后,相当于宽度、高度除以2的效果,会出现 0.5px。像素就是最小的单位了,要么1,2,3,要么就是0,没有小数。

好在这个项目里面的弹出层宽度是可以设置宽度的,看了下这个模糊的弹出,设置的宽度是865px,好吧,那就改改宽度解决问题!但是,如果是不定高度垂直居中呢?这就比较棘手了,不能用这个方案了,所以transform对于居中不是一个好的解决方案,在实际项目中应该尽量避免此方案!

所以,如果考虑兼容就老老实实的用table + table-cell方式去居中,不考虑兼容的话使用flex方式去居中!

标签: CSS

除单独说明外,文章默认采用知识共享署名-相同方式共享 4.0 国际许可协议进行许可。

添加新评论