Striped repeating background flickers on scroll in IE

Question

Try scrolling this page up and down and watch the image below. You may notice that the image flickers. (Don't use a scroll wheel as this will likely scroll by large discrete amounts and you won't see the effect.)

To avoid this effect when using striped backgrounds, you can add the following to your CSS:

background-attachment: fixed;

This causes the background to remain fixed, so it will not appear to flicker when the user scrolls the page. This works fine in Chrome and Firefox ( demo ), but not in IE. The background-attachment feature is supposed to be supported in IE8 and above, so why isn't this working? More importantly, how can I eliminate the flicker in IE?

Answer 1

You could feed this to just IE9 (in IE8 it seems to not work on the pseudo-element, so for IE7-8 support, make it the elmeent itself) or use it for all the browsers, but actually putting it into a fixed element (or in this case, a pseudo-element) resolved the flicker for me ( 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;
}

For 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

I suggest you to add

<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

I suggest you add

background-repeat: no-repeat;

to the css if you haven't already and adjust the background-position. This may help with the flicker. Also make sure you are using the correct DOCTYPE to support background-attachment.