1

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.

Community
  • 1
  • 1
Joseph Casey
  • 1,283
  • 1
  • 14
  • 34

2 Answers2

2

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

-webkit-transform: translateZ(0)
Joseph Casey
  • 1,283
  • 1
  • 14
  • 34
  • I should note that I am still seeking an explanation for why this fixes the issue. Any information would be appreciated. – Joseph Casey Oct 06 '14 at 18:15
2

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

aponzani
  • 438
  • 6
  • 10
  • Yes. I was crowding my event loop (actually the task queue) by not debouncing on a longer time period. After I looked into this a while back, it is apparent that this is a null transform hack. It's also suppose to be improved for Chrome and Opera by the use of {will-change} Had a pretty good conversation about it on another users' question. http://stackoverflow.com/questions/15152470/chrome-rendering-issue-fixed-position-anchor-with-ul-in-body/15203880#comment41199397_15203880 – Joseph Casey Nov 11 '14 at 19:22
  • You might want to mention debouncing in your answer by the way. – Joseph Casey Nov 11 '14 at 19:25