Javascript and CSS animation render blocking -

my web page has sticky header image in it:

/* simplified css: */ header {     position: fixed;     top: 0px;     left: 0px;     width: 100%;     height: 150px;     transition: height .5s; }  header > img {     display: block;     margin: 0px auto;     height: 100%;     width: auto; } 

when user scrolls down, header smoothly becomes less high:

header.floating {     height: 100px; } 

this scales image due it's 100% height. during transition, image becomes pixelated; anti-alias removed increase browser's performance, suppose.

my web page has welcome screen different images in it. image shown changes every 5 seconds. there progress bar show timer's progress.

/* simplified css: */ section#welcome {     width: 100%;     height: 100%; }  section#welcome div#progress {     width: 0.1%;     height: 10px;     background-color: green; } 

---

/* simplified javascript & jquery: */ setinterval(function() {     changeimage();     $("div#progress").animate({         width: '100%'     }, 5000); }, 5000); 

however; when transition done, image remains pixelated -- it's anti alias seems blocked jquery's animate(). when disable jquery, image rerendered after second.

---

things i've tried

i tried adding gap between timers, allow browser rerender images. did not work.

i tried replacing jquery css animation. did not work either.

where go here? how can maintain progress bar, allow browser (or force it) rerender image in header?