[tweenfaster]

Столкнулся с проблемой, именно в google chrome. Делаю навигационную панель в шапке сайта, прилипающую к верхнему краю окна при скролле. Для этого, при помощи jquery и javascript, я изменяю class этого div элемента таким образом:

<script>
window.onscroll = function() {

	if( window.pageYOffset > 0){
	  $('#header').addClass('scrolled'); 
	}
    else {
        $('#header').removeClass('scrolled')
    }
}
</script>

#header {
	background: url("images/background.e95d2cd1e8ca.png") repeat;
	background-color: #f48831;
	height: 50px;
	position: absolute;
	width: 100%;
	font-size: 10px;
	z-index: 100;
}
#header.scrolled {
	-webkit-box-shadow: 0px 1px 0px #d67a37, 0px 2px 2px rgba(0, 0, 0, 0.1), inset 0px -1px 1px rgba(255, 255, 255, 0.2);
	-moz-box-shadow: 0px 1px 0px #d67a37, 0px 2px 2px rgba(0, 0, 0, 0.1), inset 0px -1px 1px rgba(255, 255, 255, 0.2);
	box-shadow: 0px 1px 0px #d67a37, 0px 2px 2px rgba(0, 0, 0, 0.1), inset 0px -1px 1px rgba(255, 255, 255, 0.2);
	position: fixed;

}

Но во время смены класса и перерисовки в соответствии с новыми свойствами css, происходит однократное мерцание. Как сделать чтобы этого мерцания не происходило? Нужно один в один как тут www.zopim.com, тут они как-то избежали эту проблему. Хочу именно понять, как эта проблема решается, по этому альтернативные варианты не интересны.
Примечание:
Если изначально прописать в #header свойство position: fixed; а в #header.scrolled вообще убрать этот параметр, то смена класса происходит без мерцания.