Header flickering on scrolling

[Evhor]

Hello,

I have a problem with header “flickering” after scrolling the page. Just before the header becomes sticky, it becomes transparent for a fraction of a second.

It is happening on some of the pages on my site, while others behave just fine.

I disabled my child theme, so no custom css is involved…

btw. Thanks for developing this great theme, keep up the good work, guys 🙂

[Mohammad – SUPPORT]

Hi,
It seems fine here so please check after clear the cache of browser.
Thanks
Mohammad

[Evhor]

Hi,
The problem persists on different computers and browsers (Chrome, Opera, IE). Please check portfolio here: http://www.algum.pl/newalgum/fotele/
also all the portfolio items have the same problem:
http://www.algum.pl/newalgum/fotele-kinowe-teatralne/
http://www.algum.pl/newalgum/fotele/avion/

Also the contact page:
http://www.algum.pl/newalgum/kontakt/

Other pages seem fine

[laranz – SUPPORT]

Hi,

It seems fine for me too, can give us the exact issue on which browser/version on which OS. I checked in FF on a Win 7 OS, it works fine for me. Or just record us a video about the issue.

Let us know,

Thanks,
laranz.

[Evhor]

You are right – it looks fine on FF.

But here is a video from WIN7, 1920×1080 – Chrome, Opera and IE11:

http://youtu.be/L5aFKjqrE1s

The same thing happens on my laptop running W8 1600×900, also on 1366×768 and on mobile menu…

[laranz – SUPPORT]

Hi,

I forward this to our developers to check this, maybe that is due to the webkit’s browsers time to render the fixed elements and CSS animations.

Let us know,

Thanks,
laranz.

[Swift Ideas – Ed]

Hi @Evhor

Please try adding this custom css:

.is-sticky .sticky-header {
  position: fixed;
  top: 0px;
}

I can only get it to happen very rarely, I think it may just be that split second where the browser is running the jQuery and updating the display.

– Ed

[Evhor]

Hi,

It doesn’t work. Besides, when header changes to ‘sticky’ it gets the same style attributes:

<header id=”header” class=”sticky-header clearfix” style=”position: fixed; top: 0px;”>

Why is this happening on some pages only?

[Swift Ideas – Ed]

Hi @Evhor

I know it gets the same style attributes, but that takes time to add via jQuery.

The reason it only happens on some pages, is the pages it doesn’t happen on aren’t tall enough for the header to be made sticky. Only other thing I can think of is to have it permanently fixed:

@media only screen and (min-width: 800px) {
#header-section #header {
  width: 100%;
  position: fixed;
  top: 0;
min-height: 79px;
z-index: 100;
}
}

– Ed