IE中滚动体上的条纹重复背景闪烁

Question

试着上下滚动这个页面，看看下面的图片。你可能会注意到图像闪烁。(不要使用滚动轮，因为这可能会滚动大量离散量，您将不会看到效果。)

​

​

为了避免在使用条纹背景时产生这种效果，您可以在CSS中添加以下内容：

background-attachment: fixed;

这将导致背景保持固定，因此在用户滚动页面时不会出现闪烁。这在Chrome和火狐(演示)、中很好，但在IE中就不行了。这个背景附件功能应该在IE8和更高版本中得到支持，那么为什么这个功能不能工作呢？更重要的是，如何消除IE中的闪烁？

Answer 1

您可以只将其提供给IE9 (在IE8中，它似乎不适用于伪元素，因此为了支持IE7-8，使其成为独立的浏览器)或将其用于所有浏览器，但实际上将其放入fixed元素(在本例中为伪元素)解决了闪烁问题(见小提琴)：

.background:after {  
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url(http://www.commentnation.com/hotlinks/diagonal_pin_stripes_background_gray_on_white.gif);
    background-attachment: fixed;
    z-index: -1;
}

For IE7-8 (见小提琴)：

.background {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url(http://www.commentnation.com/hotlinks/diagonal_pin_stripes_background_gray_on_white.gif);
    background-attachment: fixed;
    z-index: -1;
}

Answer 2

我建议你再加上

<script>
if(navigator.userAgent.match(/Trident\/7\./)) {
  document.body.addEventListener("mousewheel", function() {
    event.preventDefault();
    var wd = event.wheelDelta;
    var csp = window.pageYOffset;
    window.scrollTo(0, csp - wd);
  });
}
</script> 

Answer 3

我建议你加上

background-repeat: no-repeat;

到css，如果您还没有调整背景位置。这可能有助于闪烁。还要确保使用正确的DOCTYPE来支持背景附件。