記一次錯：小數 em 引起的文字抖動問題
摘要：
為了使網頁適應手機端，現在很多程式設計師都開始偏向使用 em 或者 rem 了，但是 em 也會有一些坑，我今天就遇到了一個，特別奇怪，要不是使用折半刪程式碼法還真的測不出這個 bug。
因為專案程式碼太多了，我就寫個簡單的演示一下。
例子
假設現在有如下 HTML:
<...
為了使網頁適應手機端，現在很多程式設計師都開始偏向使用 em 或者 rem 了，但是 em 也會有一些坑，我今天就遇到了一個，特別奇怪，要不是使用折半刪程式碼法還真的測不出這個 bug。
因為專案程式碼太多了，我就寫個簡單的演示一下。
例子
假設現在有如下 HTML:
<button class="button">Hello</button>
現在使用 CSS 3 將它 hover 時候變大。
.button {
margin-left: 30px;
background: #FF0000;
color: #FFFFFF;
padding: 0.3em;
width: 100px;
transition: all 0.3s ease-in-out;
}
.button:hover {
transform: scale(1.25);
}
如果你放大仔細去看的話會發現文字會出現細微的抖動，而且邊框也有點不協調的放大縮小。像這樣：
為什麼會有抖動
什麼會有這種抖動呢？一般來說這種抖動（當然也會有瀏覽器差異性引起的），排除了屬性太新瀏覽器不支援的情況，剩下就是因為你的動畫變化太小了，小到只能使用四捨五入來計算你的動畫。
我們來算一筆賬：
scale(1.25) transition: all 0.3s
所以在這麼長的時間裡去改變這麼微妙的變化，瀏覽器只能說“臣妾做不到呀~”。
如何解決
一般來說設定變化大一點就好了，或者時間更短一點，才會讓動畫看起來更流暢。