Значение рендеринга изображения иногда обновляется, а иногда нет

Question

У меня есть логотип на моей странице, который является большим первым, но когда вы прокручиваете вниз, он становится маленьким логотипом заголовка. Я сделал это с классом .tiny, который переключается на свиток.

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

с CSS:

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

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

Дело в том, когда логотип становится мал image-rendering:auto; обновляется иногда, а иногда просто нет. Мне кажется довольно случайным. Вы можете четко видеть разницу, когда image-rendering:auto; активен, а когда нет. Я тестирую его в хроме. Вот мой сайт: http://www.lars-widmer.tk/sites/18/ Просто подтвердите, что слайд в начале (ничего опасного не происходит;)), и вы попадаете на логотип. Просто прокрутите вверх и вниз несколько раз, и вы можете видеть, что иногда это выглядит хорошо, а иногда и нет.

Answer 1

проба это одна:

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