css翻牌文字为什么会抖动,记一次错：小数 em 引起的文字抖动问题

为了使网页适应手机端，现在很多程序员都开始偏向使用 em 或者 rem 了，但是 em 也会有一些坑，我今天就遇到了一个，特别奇怪，要不是使用折半删代码法还真的测不出这个 bug。

因为项目代码太多了，我就写个简单的演示一下。

例子

假设现在有如下 HTML:

Hello

现在使用 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);

}

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

为什么会有抖动

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

我们来算一笔账：

首先假定浏览器原始字体大小是 14px

那么 0.3em 就是 14px * 0.3 = 4.2px

而 scale(1.25) 就意味着我们要变化 4.2px * 0.25 = 1.05

transition: all 0.3s 意味我们要在 0.3 秒变化 1.05px，300毫秒对于计算器来说是很长时间了

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

如何解决

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