Question

我正在开展一个大项目，我之前只使用过变换几次，所以我没有太多的经验。这次客户有很多关于效果的请求。

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

我尝试了很少的解决方案来修复它，但没有运气，我真的不知道它为什么会发生。（-webkit-font-smoothing: antialiased;）

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

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

我添加了以下代码，但也可以在JSFiddle处找到。

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

Answer 1

有些CSS价格昂贵且＃34;渲染。你可以添加这个转换黑客，让你的GPU能够顺利地帮助你处理这个问题。它告诉浏览器将有一个z轴变换（零，实际上不是变换），因此除了CPU之外，计算机还使用GPU。这种增加的功率通常有助于产生视觉故障。严格来说这是一个黑客：）

萨斯：

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

变换后移动/跳跃元素

1 个答案: