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

Question

我正在做一个大元素，之前只用过几次转换，所以我没有太多经验。这次客户对效果有很多要求。

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

我尝试了几种解决方案来修复它，但没有成功，我真的不知道为什么会这样。 (-webkit-font-smoothing: 抗锯齿;)

我很幸运，因为这次我在一个文件中复制了它，我不需要复制 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 渲染起来“代价高昂”。您可以添加此转换 hack 来启动您的 GPU 以帮助顺利处理此过程。它告诉浏览器将有一个 z 轴变换(为零，这实际上不是变换)，因此计算机除了 CPU 之外还使用 GPU。这种增加的力量通常有助于解决视觉故障。虽然严格来说这是一个 hack :)

萨斯:

.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);
}