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
}
複製代碼