Bild-Rendering-Wert wird manchmal aktualisiert und manchmal nicht

Question

Ich habe ein Logo auf meiner Seite, die zuerst groß ist, aber wenn Sie nach unten scrollen, wird es ein kleines Header-Logo. Ich tat das mit einer .tiny-Klasse, die bei scroll umgeschaltet wird.

$(window).on("scroll touchmove", function() { 
    $('#logo').toggleClass('tiny', $(document).scrollTop() > 0); 
}); 

mit der CSS:

#logo { 
    width: 50%; 
    left: 20vw; 
    transition: ease-in-out .5s; 
} 

#logo.tiny { 
    width: 230px; 
    image-rendering:auto; 
} 

Die Sache ist, wenn das Logo klein wird die image-rendering:auto; manchmal aktualisiert wird und manchmal einfach nicht. Es scheint mir ziemlich zufällig zu sein. Sie können den Unterschied deutlich sehen, wenn image-rendering:auto; aktiv ist und wenn nicht. Ich teste es in Chrom. Das ist meine Website: http://www.lars-widmer.tk/sites/18/ Bestätigen Sie einfach diese Folie am Anfang (nichts Gefährliches passiert;)) und Sie erhalten das Logo. Scrollen Sie einfach ein paar Mal nach oben und unten und Sie sehen, dass es manchmal gut aussieht und manchmal nicht.

Answer 1

Tryout diese:

#logo.tiny { 
    width: 230px; 
    transform: scale(1); 
    zoom: 0; 
}