css - 在 IE 中滚动时条纹重复背景闪烁

Question

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

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

background-attachment: fixed;

这会导致背景保持固定，因此当用户滚动页面时它不会出现闪烁。这在 Chrome 和 Firefox ( demo ) 中运行良好，但在 IE 中不行。IE8 及更高版本应该支持背景附件功能，为什么这不起作用？更重要的是，如何消除 IE 中的闪烁？

Answer 1

您可以将其仅提供给 IE9（在 IE8 中，它似乎不适用于伪元素，因此对于 IE7-8 支持，将其设置为 elmeent 本身）或将其用于所有浏览器，但实际上将其放入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;
}

对于 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 来支持后台附件。