Wenn das Hintergrundbild skaliert wird, flackert es in Chrome

Question

Ich habe ein div mit einem Hintergrundbild darauf. Wenn es eine einfache Transformationsskalierungs-Animation hat, beginnt es in Google Chrome und Opera zu flackern. Hier ist ein einfaches 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 
}); 

Wenn das Bild ein einfaches img Element ist, das gleiche Maßstab Animation funktioniert gut. Der Übergang glatt ist:

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

Die Beispiele verwenden GASP für Animationen. Ich brauche eine Lösung, die GSAP verwendet, um das Div mit besserem Ergebnis zu skalieren.

Haben Sie eine Idee, wie Sie es mit Hintergrundbild glatt machen?

Answer 1

Versuchen Sie dies: Fügen Sie transition: all 1s linear; hinzu, damit es reibungslos skaliert.

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 vielleicht können Sie diese CSS-Animation ausprobieren. Zur Unterstützung besserer Browser

-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 hinzufügen können Sie nativen Übergang zu Ihrer Transformation hinzuzufügen. Versuchen Sie den Code verwenden unter:

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>

Es CSS-Eigenschaft "transition" und beginnt Übergang auf Körper Klick verwendet.

Answer 4

Verwenden Sie einfach CSS, viel besser. Wenn Sie Ihren Inspector öffnen, sehen Sie, dass Ihr Tweenlite-Code das style-Attribut Ihres div sehr schnell mit diesem Codeabschnitt einstellt/aktualisiert: transform: translate3d(0px, 0px, 0px) scale(1.00212, 1.00212);. Dies ist JS, etwas zu berechnen und dann CSS sagen, was zu tun ist (sehr grundlegende Erklärung). CSS kann das selbst machen. Warum willst du so schlecht bei deiner GSAP Engine bleiben?