transform導致字體模糊

我在給一個定位元素垂直居中的時候慣性的設置了

.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
}