Chrome中的粘性顶部条形图渲染问题

Sticky top bar rendering issue in Chrome

本文关键字：条形图 问题 顶部 Chrome      更新时间：2023-09-26

让我切入正题。它在这个网站上：http://www.smb.nu/wip/kampanj/

当滚动过去时，带有链接的白色条应该粘在顶部，这种效果可以通过一些简单的jQuery:来实现

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

到目前为止，一切都很好（我相信）。css类看起来是这样的：

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

这在Firefox（OS X和Windows）中运行得很好，甚至在IE（喘息！）中也是如此。然而，在Chrome（OS X和Windows）以及Safari（OS X）中，它会不时闪烁、消失和重新出现。尽管Chrome的网络检查员告诉我它就在那里（截图）。

到底发生了什么事？我是不是偶然发现了一个定位固定的WebKit渲染错误（似乎极不可能），还是犯了一些初学者的基本错误？还是完全是别的东西？

添加：

-webkit-backface-visibility:hidden

到父容器应该可以做到这一点。

当您移除-webkit过滤器时：blur（0px）；在#uberwrapper之外，标头功能正常。

我用chrome控制台上的-webkit-transform: translateZ(0);修复了它。。。不要问我为什么，我认为它触发了一些gpu的计算，似乎可以修复它。但这是一个肮脏的变通方法，可能在不久的将来会崩溃。

这可以通过使用纯css来实现，为什么需要jquery？

http://jsfiddle.net/SRpA4/

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

}

我认为chrome最近可能对其呈现位置的方式进行了更改：已修复。我不知道他们做了什么，也不知道为什么它不适合你，但我确实有一个可能更好的解决方案，因为它也适用于手机（许多手机不支持固定定位）。

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; }

这似乎是一个错误。#uberwrapper的-webkit-filter: blur(0px);似乎导致了这个问题。

不知道背后的确切原因。但一个简单的解决方案是删除-webkit-filter: blur(0px);

相关文章：