transform致使字体模糊

我在给一个定位元素垂直居中的时候习惯性的设置了

.element {
  position: absolute;
  top: 50%;
  transfome: translateY(-50%);
}
复制代码

设置完成后没有发现问题，后来不管时美工仍是测试都反应这个元素字体模糊。

我仍是第一次碰见这个问题。后来通过反复排除认定了是 transform 的锅。

通过查资料以后发现由于是定位元素的高度为奇数，自身的50%就是一个小数。而transform在渲染非整数的 px 时就会出现字体模糊。甚至时上下反复移动（抖动）。

解决办法：

• 给定位元素偶数高度(基本没用，不少状况咱们没法写死高度)。

• 不用动画用margin,不过margin的百分比是相对于父级的。咱们仍是要知道元素的准确高度。

.element {
  position: absolute;
  top: 50%;
  margin-top: ...;
}
复制代码

• 给定位元素一个父级。使用height:100% 而后设置flex布局的垂直居中

.father {
  display:flex;
  align-items:center
}
复制代码