title: When background image scaled, it starts to flicker in Chrome
body: <p>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:</p>
  
  <p><a href="http://codepen.io/anon/pen/bWpNYq" rel="nofollow noreferrer">http://codepen.io/anon/pen/bWpNYq</a></p>
  
  <p>CSS:</p>
  
  <pre><code>body {
    height: 100vh;
    overflow: hidden
  }
  
  div {
    width: 100%;
    height: 100%;
    background-color: #f00;
    background-position: 50% 50%;
    background-image: url(".....jpg");
    background-size: cover;
  }
  </code></pre>
  
  <p>Script:</p>
  
  <pre><code>TweenLite.set('div', {
    backfaceVisibility: 'hidden',
    perspective: 1000
  });
  TweenLite.fromTo('div', 10, {
    scale: 1.1
  }, {
    scale: 1
  });
  </code></pre>
  
  <p>When the image is a simple img element, the same scale animation works fine. The transition is smooth:</p>
  
  <p><a href="http://codepen.io/anon/pen/pPyvdp" rel="nofollow noreferrer">http://codepen.io/anon/pen/pPyvdp</a></p>
  
  <p>The examples use GASP for animations. I need a solution which use GSAP to scale the div with better result.</p>
  
  <p>Do you any idea how to make it smooth with background image?</p>