transform导致字体模糊的bug

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

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

设置完成后没有发现问题,后来无论时美工还是测试都反应这个元素字体模糊。

我还是第一次遇见这个问题。后来经过反复排除认定了时 transform 的锅。

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

解决办法:

  • 给定居中元素偶数高度(基本没用,很多情况我们无法写死高度)。
  • 不用动画用margin,不过margin的百分比是相对于父级的。我们还是要知道元素的准确高度。
.element {
  position: absolute;
  top: 50%;
  margin-top: ...;
}
  • 给与定位元素一个父级。使用height:100% 然后设置flex布局的垂直居中
.father {
  display:flex;
  align-items:center
}
    原文作者:当然我没扯淡
    原文地址: https://segmentfault.com/a/1190000013835331
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞