Take the 2-minute tour ×

A known old known problem is that various old browsers both IE 7 (perhaps also IE 8) and FireFox 3.0 ~ 3.6, are the experiencing of very SLOW scrolling down through a webpage whenever a background image img or div with an image has the position: fixed; property.

Having built a site with this feature I noticed that in IE 7 (maybe 8 too) that had a terribly sluggish scrolling experience ruing the good enjoyment of the entire website. All other JQuery effects were also not smooth anymore. Now, as soon as I commented the position: fixed; property of the background image div:img, everything becomes good again.

img#bg {
/*  position:fixed;*/
    min-height:100%; /* proportionally fit height (eg panorama images)  */
    width: 100%;
<body><img src="background.jpg" id="bg"/></body>

Q1: How to make that line conditional? Users with IE7 or IE8 /*position:fixed;*/ and users with IE9 or FF4 position:fixed

Q2: Could anything in my css have triggered the bug except position: fixed? for example should img#bg be written differently?

Some links: MozzilaZine, StackOverflow, LinDesk

Thanks very much for your suggestions and ideas on this browserbug. Much appreciated!

share|improve this question
add comment

2 Answers

up vote 4 down vote accepted

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>

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.


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.

share|improve this answer
And I really don't advocate using hacks, especially not for a standards-compliant browser like Firefox. –  BoltClock Apr 14 '11 at 7:38
add comment

Q1: How to make that line conditional?

If you'd rather not to use conditional comments (per BoltClock's reply), a summary of browser-specific CSS hacks can be found on Paul Irish's site.


Short answer: Yes, but probably none as much as position: fixed. If removing it fixes your issue, it's your biggest problem.

Slightly longer answer: box-shadow has been shown to cause performance issues. So will IE's proprietary filters. Inefficient selectors are sometimes mentioned, but it's debatable whether they have a large effect.

To profile your code, use the CSS Stress Test bookmarklet to drill down on exactly which selectors are causing your browser trouble. It's great!

share|improve this answer
add comment

Your Answer


