1

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

在 Chrome 中，我在为左侧 div 上的悬停效果设置动画时会出现这种奇怪的闪光（鼠标进出很多，你应该看到它）；这在 Firefox 中不会发生。有什么想法可以解决吗？

HTML：

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

萨斯：

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

1 回答 1

2

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

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

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

希望有帮助！

于 2013-02-13T22:16:51.030 回答