变换后在元素上移动/跳跃

Question

我正在做一个大项目，以前只使用过几次transform，所以我没有太多经验。这一次，客户有许多关于效果的请求。

我有一个#item，里面有一个按钮和一个透明的div。悬停时，透明div上的opacity变为0.8，按钮从顶部显示为transform。问题是，当我将鼠标悬停在div上时，按钮会出现，但几毫秒后，你可以看到按钮大小增加，文本移动了几个像素。（Firefox 42.0-OSX）

我尝试了一些解决方案来解决它，但运气不好，我真的不知道为什么会发生这种情况。（-webkit-font-smoothing: antialiased;）

我很幸运，因为这次我在一个文件中复制了它，而且我不需要复制100kb的css。：）

代码非常简单。如果你能给我一些指导方针、教程或解决方案，我真的很感激。

我添加了下面的代码，但它也可以在JSFiddle上获得。

#item {
    width: 300px;
    height: 300px;
    background: gray;
    position: relative;
}
a {
    position: absolute;
    top: 50%;
    left: 50%;
    padding: 10px 15px;
    background: black;
    display: inline-block;
    transform: translate(-50%, -80%);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
    color: #fff;
    text-decoration: none;
}
#item:hover a {
    transform: translate(-50%, -50%);
    opacity: 1;
}
#overlay {
    background-color: green;
    opacity: 0;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transition: opacity 0.3s ease;
}
#item:hover #overlay {
    opacity: 1;
}

<div id="item">
    <div id="overlay"></div>
    <a href="">Button</a>
</div>

Answer 1

有些CSS的渲染成本很高。你可以添加这个转换破解来踢你的GPU来帮助处理这个问题。它告诉浏览器将有一个z轴变换（零，这实际上不是变换），所以计算机除了使用CPU之外还使用GPU。这种增加的功率通常有助于解决视觉故障。严格来说，这是一次黑客攻击：）

Sass:

.gpu {
  @include vendor(transform, translateZ(0));
}

CSS

.gpu {
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
}