设置transform导致弹窗字体模糊问题

说明

• 项目中，设置弹出框居中的时候遇到字体变模糊的情况，查阅资料后发现是transform的问题，下面具体看看：

原因

• 项目中弹出框的样式居中是这样写的：

.box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

• 比如盒子的宽度为300px，高度为401.5px，这样transform计算出的50%是150px，和200.75px，这种情况下就会出现了字体模糊的现象
• 后来看网上也是说到如果宽度和高度为奇数，translate为百分比，计算出为小数的时候会出现字体模糊的现象

解决

• 将盒子的高度或者宽度改为偶数可以解决此问题