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

Question

尝试上下滚动此页面并观看下面的图像。您可能会注意到图像闪烁。 （不要使用滚轮，因为这可能会以大量离散量滚动，您将看不到效果。）

要在使用条纹背景时避免此效果，可以将以下内容添加到CSS中：

background-attachment: fixed;

这会导致背景保持固定，因此当用户滚动页面时它不会闪烁。这适用于Chrome和Firefox（demo），，但不适用于IE。 IE8及更高版本应支持后台附件功能，为什么这不起作用？更重要的是，如何消除IE中的闪烁？

Answer 1

你可以将它提供给IE9（在IE8中似乎不能用于伪元素，因此对于IE7-8支持，使其成为elmeent本身）或者将它用于所有浏览器，但实际上将它放入fixed元素（或者在这种情况下，伪元素）为我解决了闪烁（see fiddle）：

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

对于IE7-8 （see fiddle）：

.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来支持背景附件。