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
}