CODEWITHSUNDEEP
google-chromecsswebkitcss-transitions
Brian
Brian

Reputation: 2829

Chrome Transition Flash

Example: http://codepen.io/mastastealth/pen/zvxJc

In Chrome, I get this weird flash upon animating the hover effect on the left div (mouse in and out a lot and you should see it); this does not occur in Firefox. Any ideas to fix it?

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

Upvotes: 1

Views: 661

Answers (1)

Christofer Vilander
Christofer Vilander

Reputation: 18042

I've had similar problems and what solved it for me seems to fix it in your case as well. I'm not really sure why this usually works though and I haven't really found a good explanation, or if there's other better solutions.

But one way is to add backface-visibility: hidden; to div {} and the flash should disappear.

Edit: You can also apply -webkit-transform: translate3D(0, 0, 0); to force hardware acceleration which seems to make the flash to disappear.

Hope that helps!

Upvotes: 2

Related Questions