记一次错：小数 em 引起的文字抖动问题

为了使网页适应移动端，现在很多程序员都开始偏向使用 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);}

假如你放大仔细去看的话会发现文字会出现细微的抖动，而且边框也有点不协调的放大缩小。像这样：

代码放在 codeSandBox 里

为什么会有抖动

什么会有这种抖动呢？一般来说这种抖动（当然也会有浏览器差异性引起的），排除了属性太新浏览器不支持的情况，剩下就是由于你的动画变化太小了，小到只能使用四舍五入来计算你的动画。

我们来算一笔账：

1. 首先假定浏览器原始字体大小是 14px
2. 那么 0.3em 就是 14px * 0.3 = 4.2px
3. 而 scale(1.25) 就意味着我们要变化 4.2px * 0.25 = 1.05
4. transition: all 0.3s 意味我们要在 0.3 秒变化 1.05px，300毫秒对于计算器来说是很长时间了

所以在这么长的时间里去改变这么微妙的变化，浏览器只能说“臣妾做不到呀~”。

如何处理

一般来说设置变化大一点就好了，或者者时间更短一点，才会让动画看起来更流畅。