Chrome Transition Flash

Question

示例：http://codepen.io/mastastealth/pen/zvxJc

在Chrome中，我通过动画左边div上的悬停效果来获得这个奇怪的闪光（鼠标进出很多，你应该看到它）;这在Firefox中不会发生。有什么想法来解决它吗？

HTML：

<aside>
  <div>Hi</div>
</aside>
<aside class="l"></aside>

SASS：

html, body { height: 100%; }

aside {
  background: #CCC;
  float: left;
  height: 100%;
  width: 50%; 

  &.l {
   background: linear-gradient(blue,red); 
  }
}

div { 
  background: rgba(0,0,0,0.4);
  margin: 100px auto;
  height: 100px; width: 80%;
  transition: transform 0.2s;

  &:hover { transform: scale(1.1); }
}

Answer 1

我遇到了类似的问题，为我解决的问题似乎也解决了你的问题。我不确定为什么这通常会起作用，我还没有真正找到一个好的解释，或者是否还有其他更好的解决方案。

但一种方法是将backface-visibility: hidden;添加到div {}，闪光灯应该会消失。

编辑：您还可以应用-webkit-transform: translate3D(0, 0, 0);强制硬件加速，这似乎会使闪存消失。

希望有所帮助！