Why Does a Fixed Background-Image Move When Scrolling on Ie

Why does a fixed background-image move when scrolling on IE?

This is a known bug with fixed background images in Internet Explorer. We recently did some work to improve this behavior and have shipped updates to our preview build of Internet Explorer on Windows 10. You can test the changes today from Mac OS X or Windows on http://remote.modern.ie.

Below is the before and after, IE 11 and IE Remote Preview. Notice how scrolling with the mouse-wheel no longer causes the fixed background image to jump (or jitter) as it did in Internet Explorer 11.

Striped repeating background flickers on scroll in IE

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

Position: fixed Background DIV with images makes scrolling slow: How to make conditional CSS rules for browser-compatibility?

Q1: How to make that line conditional?

For IE older than version 9 there's always a conditional comment override:

<!--[if lt IE 9]>
<style>img#bg { position: absolute; }</style>
<![endif]-->

For Firefox, one way would be to find some hack that distinguishes version 4 from its predecessors, which I can't really think of right now.

Q2: Could anything in my css have triggered the bug except position: fixed?

That and the fact that it's an image. But mostly the fixed positioning. This also happens if you used a background image with background-attachment: fixed, and is a well-known performance issue on those browsers.

---

Related Topics