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

说明
  • 项目中,设置弹出框居中的时候遇到字体变模糊的情况,查阅资料后发现是transform的问题,下面具体看看:
原因
  • 项目中弹出框的样式居中是这样写的:
.box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
  • 比如盒子的宽度为300px,高度为401.5px,这样transform计算出的50%是150px,和200.75px,这种情况下就会出现了字体模糊的现象
  • 后来看网上也是说到如果宽度和高度为奇数,translate为百分比,计算出为小数的时候会出现字体模糊的现象
解决
  • 将盒子的高度或者宽度改为偶数可以解决此问题

你可能感兴趣的:(js,transform,字体模糊,弹窗)