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

私は同様の問題を抱えていましたが、それを解決したことで、あなたの場合も解決されたようです。なぜこれが通常うまくいくのか、私は本当に良い説明を見つけていないか、または他のより良い解決策があるかどうかはよくわかりません.

しかし、1 つの方法は追加するbackface-visibility: hidden;ことdiv {}で、フラッシュが消えるはずです。

編集：-webkit-transform: translate3D(0, 0, 0);フラッシュが消えるように見えるハードウェアアクセラレーションを強制するために適用することもできます.

それが役立つことを願っています!

于 2013-02-13T22:16:51.030 に答える