Position: fixed Background DIV with images makes scrolling slow: How to make conditional CSS rules for browser-compatibility?_问答_开发者

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

开发者 https://www.devze.com 2023-02-24 07:51 出处：网络

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 ima

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.

<html><head>
img#bg {
/*  position:fixed;*/
    top:0;
    left:0;
    height:auto;
    min-height:100%; /* proportionally fit height (eg panorama images)  */
    width: 100%;
    z-index:-2;
}
</head>
<body><img src="background.jpg" id="bg"/></body>
</html>

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!

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.

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.

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

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!