Chrome中的顶部粘滞显示问题

Question

Let me cut to the chase. It's on this site: http://www.smb.nu/wip/kampanj/

The white bar with the links is supposed to stick to the top when scrolled past, this effect is achieved with some simple jQuery:

$(window).scroll(function() {
    $('#floater').toggleClass('sticky', $(window).scrollTop() > 129);
    $('#quote').toggleClass('sticky', $(window).scrollTop() > 129);
});

So far, so good (I believe). The css classes look like so:

#floater.sticky {
    position: fixed;
    top: 0;
    z-index: 2;
}
div#quote.sticky {
    padding-top: 78px;
}

This works just fine in Firefox (OS X and Windows), and even in IE (gasp!). However, in Chrome (OS X and Windows) as well as Safari (OS X), it flickers, disappears and reappears, every so often. This despite Chrome's web inspector telling me it's there ( screenshot ).

What the hell is going on? Did I stumble upon a WebKit rendering bug with fixed positioning (seems highly unlikely), or make some basic beginner's mistake? Or is it something else entirely?

Answer 1

Adding:

-webkit-backface-visibility:hidden

to the parent container should do the trick.

Answer 2

I fixed it with -webkit-transform: translateZ(0); on chrome's console... Don't ask me why, I think it triggers some gpu's calculation and seems to fix it. But that's a dirty workaround wich may breaks in a near future.

Answer 3

When you remove the -webkit-filter: blur(0px); off of #uberwrapper the header functions correctly.

Answer 4

This can be achieved by using pure css, why you need jquery?

http://jsfiddle.net/SRpA4/

.header-cont {
width:100%;
position:fixed;
top:0px;
height:50px;
background-color:#C00;

}

Answer 5

I think chrome may have made a change recently to the way it renders position:fixed. I haven't got a clue what they've done or why it's not working for you corrently, but I do have a solution that is probably better because it will work on mobiles too (many mobiles don't support fixed positioning).

jQuery

$(window).scroll(function() {
  if ( $(window).scrollTop() > 129 ) {
    var scrollTop = $(window).scrollTop();
    $('#floater').addClass('sticky').css('top',scrollTop);
  }
  else { $('#floater').removeClass('sticky'); }
});

CSS

#floater.sticky {
 position: absolute;
 top: 0;
 z-index: 2; }

Answer 6

That seems to be a bug. The -webkit-filter: blur(0px); for #uberwrapper seems to be causing the issue.

Dont know the exact reason behind it. But an easy fix would be to Remove -webkit-filter: blur(0px);