Sticky header "flashes" when scrolling in Chrome/IE

[eternalbeta]

I have my header set up to be sticky and to not re-size, but when I first scroll, the header “flashes” very quickly as if it is trying to re-size, but doesn’t. I’ve been able to confirm this behavior in Chrome and IE, but it does not appear to happen with Firefox.

I believe I had the same issue with Dante at some point but do not remember what the resolution was.

Thanks.

[David Martin – Support]

Hi,

Can you please add this and re-test:

#header.sticky-header {
    transition: transform .0s ease-in-out,transform .0s ease-in-out,background .0s ease-in-out;
    -moz-transition: height .0s ease-in-out,-moz-transform .0s ease-in-out,background .0s ease-in-out;
    -webkit-transition: height .0s ease-in-out,-webkit-transform .0s ease-in-out,background .0s ease-in-out;
    -o-transition: height .0s ease-in-out,-o-transform .0s ease-in-out,background .0s ease-in-out;
}

Cheers,
David.

[eternalbeta]

No good unfortunately, even if I added important tags.

[David Martin – Support]

Hi,

Could you add a WP login, should be quicker for me to further help. This is the next tweak I would like to add:

#header-section header {
    position: fixed!important;
    right: 0;
    left: 0;
}

– David.

[eternalbeta]

Looks like that did it, even without the important tag. Kind of seems like a bug. Thanks though David!

[Rui Guerreiro – SUPPORT]

Great. Thanks David
-Rui

[Kyle – SUPPORT]

Great! Thanks David

– Kyle

[David Martin – Support]

Nice, no problem.

I’ll test this further locally and see if we can improve it in the future.

– David.