css使用tranform：translateY-50%属性进行垂直居中调整的时候会导致被居中元素的边框渲染异常？

Question

使用tranform：translateY(-50%)属性进行垂直居中调整的时候会导致被居中元素的边框渲染异常。

1.改为marin-top调整就是正常的。

2.改成tranform：translate3d的方式，开启硬件加速也可以正常渲染。

3.把同级元素去除，使用translateY(-50%)也可以正常渲染。

请问是什么原因？

Answer 1

解决办法就是放弃css3使用js动态计算。
因为translate视觉上允许0.5px的存在，而本身矩阵式不支持小数像素的。说法不太准确，意思是这么个意思

Answer 2

只要元素是单数的 比如21高度 用transform居中有时就会造成这样的模糊 你把按钮lineheight跟height设置成双数 应该就好了