Положение: исправлено Фоновый DIV с изображениями замедляет прокрутку: Как сделать условные CSS-правила для совместимости с браузером? - PullRequest
Новая
       6

Положение: исправлено Фоновый DIV с изображениями замедляет прокрутку: Как сделать условные CSS-правила для совместимости с браузером?

2 голосов
/ 14 апреля 2011

Известная старая известная проблема заключается в том, что различные старые браузеры IE 7 (возможно, также IE 8) и FireFox 3.0 ~ 3.6 испытывают очень МЕДЛЕННУЮ прокрутку вниз по веб-странице всякий раз, когда фоновое изображение img или div с изображением имеет свойство position: fixed;.

Создав сайт с этой функцией, я заметил, что в IE 7 (возможно, и в 8) тоже был ужасно медленный процесс прокрутки, который испортил удовольствие от всего сайта. Все остальные эффекты JQuery также не были гладкими. Теперь, как только я прокомментировал свойство position: fixed; фонового изображения div: img, все снова стало хорошо. 

<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: Как сделать эту строку условной? Пользователи с IE7 или IE8 /*position:fixed;*/ и пользователи с IE9 или FF4 position:fixed

Q2: Может ли что-нибудь в моем css вызвать ошибку, кроме position: fixed?, например, img#bg должно быть написано по-другому?

Некоторые ссылки: MozzilaZine , StackOverflow , LinDesk

Большое спасибо за ваши предложения и идеи по поводу этого браузера. Очень ценится!

Ответы [ 2 ]

4 голосов
/ 14 апреля 2011

Q1: Как сделать эту строку условной?

Для IE старше версии 9 всегда есть условное переопределение комментария: 

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

Для Firefox одним из способов было бы найти какой-нибудь взлом, который отличает версию 4 от его предшественников, о которой я сейчас не могу вспомнить.

Q2: Может ли что-нибудь в моем css вызвать ошибку, кроме position: fixed?

Это и тот факт, что это изображение. Но в основном это фиксированное позиционирование. Это также происходит, если вы использовали фоновое изображение с background-attachment: fixed, и это хорошо известная проблема производительности в этих браузерах.

2 голосов
/ 22 января 2012

Q1: Как сделать эту строку условной?

Если вы не хотите использовать условные комментарии (согласно ответу BoltClock), сводка браузерных CSS-хаков может бытьнайдено на сайте Пола Айриша .

Q2: Может ли что-нибудь в моем CSS вызвать ошибку, кроме position: fixed?

Shortответ: Да, но, вероятно, не так много, как position: fixed.Если удаление устранит вашу проблему, это будет вашей самой большой проблемой.

Немного более длинный ответ: было показано, что box-shadow вызывает проблемы с производительностью.Так же как и собственные фильтры IE.Неэффективные селекторы иногда упоминаются, но это спорно, есть ли у них большое влияние.

1023 * Для профилирования кода используйте CSS Stress Test букмарклета , чтобы развернуть на какой именно селекторы причины вашего браузерабеда.Это здорово!
...