Delayed repaint on Scroll to Top of Fixed Header

1
votes

Example: http://www.arkansasmatters.com/beta/news/politics

I have a simple javascript that keeps a fixed header on the website. When scrolling up, the header on a rare occasion will show this red bar which will disappear if you continue scrolling up.

The Red Bar is not suppose to be there.

 function stickynav() {
var win = $(window),
    nav = $('#primary_nav_wrap'),

    pos = nav.offset().top,
    sticky = function () {
        win.scrollTop() > pos ? nav.addClass('sticky') : nav.removeClass('sticky');
    };
win.scroll(sticky);
}

Is there a reason that this script would cause the following:

  • Blank Bar on scrolling up
  • Flickering while scrolling down

Additional Informaation:

  • Browser: Google Chrome
  • User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/37.0.2062.124 Safari/537.36

Alternatively: Is there another IE7+ Cross Browser solution similar to this that I missed?

Update

This issue is replicable if a user quickly scrolls up and down. Calling the JS function over and over again.

2
javascriptjqueryhtmlcss

2 Answers

2
votes

This solution worked for a somewhat similar problem I was having in Chrome v38+ with a JS/CSS accordion plugin. I believe it only happened when JS initiated a CSS change that occurred quickly enough that Chrome's repaint function fell behind.

Using translateZ(0) will nudge the browser into using GPU acceleration to speed up CSS transforms. Here are a couple articles with more detail:

http://www.smashingmagazine.com/2012/06/21/play-with-hardware-accelerated-css/

http://blog.teamtreehouse.com/increase-your-sites-performance-with-hardware-accelerated-css

https://developer.mozilla.org/en-US/docs/Web/CSS/transform

2
votes

Adding the following CSS to the sticky navigation will prevent quick JS calls from creating a repaint issue.

-webkit-transform: translateZ(0)