解决transform导致弹窗字体模糊问题

解决transform导致弹窗字体模糊问题

• 造成原因

  项目中使用vant的popup组件时，发现里面元素的字体模糊，经过查询资料查看其样式发现原来是transform造成的。在设置 transform时 div的宽度或者高度不是偶数的时，移动50%之后，像素点并不是整数，出了小数，和显示像素没有对上，所以导致了字体模糊。

  .van-popup--center {
      top: 50%;
      left: 50%;
      transform: translate3d(-50%,-50%,0);
  }
  

• 解决方案

1. 将元素的宽高改为偶数

2. 换一种水平垂直居中的方法（我采用的解决方案）

   .searchForDate {
           z-index: 1000;
           width: 90%;
           height: 11rem;
           position: absolute;
           left: 0;
           right: 0;
           top: 0;
           bottom: 0;
           margin: auto;
           transform: translate3d(0,0,0);
       }