transform使用导致元素内字体出现模糊的坑

项目中遇到的，关于居中弹出层的字体模糊问题。看看你是不是用了transform: translate？

模糊

清晰

不定宽高的弹出框，居中的方式如下代码：

.el-dialog {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: 0 !important;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    max-height: calc(100% - 30px);
    max-width: calc(100% - 30px);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

使用了固定定位 和 transform: translate(-50%, -50%)来居中，但是由于居中的时候显示的弹框视觉效果上会有点偏下，所以调整了Y轴上的移动数字，-50%，

经过查资料时应为要移动的元素的高度时奇数的。css 动画在渲染非整数的 px 时就会出现字体模糊。

注意事项：

1、浏览器渲染有问题，transform里的值不能设置成奇数

2、弹窗width和height改成偶数

修改代码居中方式，不使用transform: none;

.el-dialog.is-fullscreen {
    width: 100%;
    height: 100%;
    overflow: auto;
    position: relative;
    top: 15px;
    left: 15px;
    -webkit-transform: none;
    transform: none;
}