弹出框使用了
-webkit-transform: translate3d(-50%, -50%, 0);
来使弹出框垂直居中。，但是弹出框变模糊了。
弹出框的样式为
.pop-alert {
position: fixed;
left: 50%;
top: 50%;
-webkit-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
z-index: 999;
min-width: 400px;
border: 4px solid rgba(0,0,0,.5);
background-color: #fff;
padding: 5px;
text-align: left;
}
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
.算了，还是不用3d了、、坑多
用 2D 的 translate(-50%,-50%)就不会出现模糊啦
你好。测试发现在chrome中，使用translate3d，里面的值用固定参数而不是百分比，如translate3d(50px,10px,10px), 则不会模糊。原因尚未明确。
个人猜测 当translate3d内的值为百分比时，实际计算出来的结果会出现小数，因为chrome渲染的原因，所以会模糊(FF不会出现边框模糊) 。
比如在chrome中这样 translate3d(50px,10.5px,10.5px)，就又会出现模糊。
可以看看这两个实例，第一个实例展示了3D变换导致元素模糊，第二个实例模糊状态得到净化：
http://demo.codingplayboy.com...
http://demo.codingplayboy.com...
元素显示模糊主要是因为使用了transform 3D变换,3D变换会开启GPU加速，GPU加速动画时，并不是把原生DOM传递给GPU，它生成一个元素图像，把该图像发送到GPU，GPU将图像应用为多边形纹理贴图代表元素，GPU可以流畅快速的对这些多边形进行旋转，缩放，转换，倾斜等变换，但由于只是传递元素图像到GPU进行处理，所以它并不能重新渲染内容，图像清晰度不能保证，元素显示清晰度自然就下降了。
更多详情可以查看我的博客http://blog.codingplayboy.com...
translate3d的那个Z，从0开始就会模糊，ios上从大于1到开始也会出问题。。
我也遇到过这个问题，弹框宽高不固定的时候想要垂直居中对齐，用了translate3d后里面的内容会模糊。
后来我用另外一种方式解决了垂直居中。(在弹框前面加了个元素,height设置成100%,并且设置vertical-align:middle)
出现模糊的原因是因为元素的高度、宽度中有奇数， 使用translate(-50%,-50%)之后，相当于宽度、高度除以2的效果，会出现 0.5px。浏览器能分辨的最小像素为1px，因此出现了模糊。
所以使用translate(-50%,-50%)的时候，一定要 注意 让 元素的 宽度、高度为偶数。
楼上正解！果然是设置了百分比引起的，可以在标题或者内容的地方，设置多1px就搞定了~