When background image scaled, it starts to flicker in Chrome

Question

I have a div with a background image on it. When it has simple transform scale animation, it starts to flicker in Google Chrome and Opera. Here is a simple exmple:

http://codepen.io/anon/pen/bWpNYq

CSS:

body {
  height: 100vh;
  overflow: hidden
}

div {
  width: 100%;
  height: 100%;
  background-color: #f00;
  background-position: 50% 50%;
  background-image: url(".....jpg");
  background-size: cover;
}

Script:

TweenLite.set('div', {
  backfaceVisibility: 'hidden',
  perspective: 1000
});
TweenLite.fromTo('div', 10, {
  scale: 1.1
}, {
  scale: 1
});

When the image is a simple img element, the same scale animation works fine. The transition is smooth:

http://codepen.io/anon/pen/pPyvdp

The examples use GASP for animations. I need a solution which use GSAP to scale the div with better result.

Do you any idea how to make it smooth with background image?

Answer 1

Try this: Add transition: all 1s linear; so it scale smoothly.

body {
  height: 100vh;
  overflow: hidden
}

div {
  width: 100%;
  height: 100%;
  background-position: 50% 50%;
  background-image: url("https://smartslider3.com/wp-content/uploads/2015/10/slide52.jpg");
  background-size: cover;
  transition: all 1s linear;
}

Answer 2

Hey maybe you can try out this css animation. For better browser support add

-webkit-animation
-moz-animation
-o-animation

 body { height: 100vh; overflow: hidden } div { width: 100%; height: 100%; background-position: 50% 50%; background-image: url("https://smartslider3.com/wp-content/uploads/2015/10/slide52.jpg"); background-size: cover; -webkit-animation: animate 5s forwards; animation: animate 5s forwards; } @-webkit-keyframes animate { 0% { transform: scale(1); } 100% { transform: scale(1.1); } } @keyframes animate { 0% { transform: scale(1); } 100% { transform: scale(1.1); } } 

 <div> </div> 

Answer 3

CSS3 allows you to add native transition to your transformations. Try to use code below:

 document.body.addEventListener('click', function(){ var div = document.getElementById('img'); div.style.transform = 'scale(.5)'; }) 

 body { height: 100vh; overflow: hidden } div { width: 100%; height: 100%; background-position: 50% 50%; background-image: url("https://smartslider3.com/wp-content/uploads/2015/10/slide52.jpg"); background-size: cover; transition: transform 30s; } 

 <div id="img"></div> 

It uses css property "transition" and starts transition on body click.

Answer 4

Just use css, way better. If you open up your inspector you'll see that your tweenlite code is setting/ updating the style attribute of your div very fast with this piece of code: transform: translate3d(0px, 0px, 0px) scale(1.00212, 1.00212); . This is JS calculating something and then telling CSS what to do (very basic explanation). CSS can do this on it's own. Why do you want to stick with your GSAP engine so badly?