Чрезвычайно медленные тени CSS3 в Chrome

Я разрабатываю приложение специально для современных браузеров и очень сильно использовал свойство box-shadow.

До недавнего времени это было абсолютно нормально во всех поддерживающих браузерах. Однако около месяца назад при тестировании в Chrome я заметил, что прокрутка была "чрезвычайно" медленной, до такой степени, что она практически не используется.

За последний месяц я попытался вырвать скрипты /messing с моей структурой html, все, о чем вы можете думать, пока, наконец, сегодня я не нашел причину.

С тегом box-shadow/webkit-box-shadow отключены все элементы, на которые я его установил, проблема исчезает.

Что мне кажется странным, так это то, что он работал отлично в Chrome до месяца назад. Кстати, прокрутка по версии сафари на окнах прекрасна, хотя и немного медленнее IE/Opera и Firefox.

Это известная проблема? У кого-нибудь есть обходной путь для этого?

И самое главное, есть ли другой способ репликации одного и того же эффекта без использования свойства CSS3?

Ответ 1

В прошлом году в Webkit открылся и закрыт отчет об ошибке:

CSS3 box-shadow вызывает задержку прокрутки (медленную производительность) в Safari 5.0.2?

Кажется, Chrome имеет открытую ошибку в старой версии:

http://code.google.com/p/chromium/issues/detail?id=95164

Airbnb недавно обсудила проблему и фактически изменила свой окончательный дизайн из-за этого:

http://nerds.airbnb.com/box-shadows-are-expensive-to-paint

Там группа людей недавно заинтересовалась программным тестированием производительности CSS. Здесь вы можете использовать букмарклет, чтобы начать собственное тестирование:

http://andy.edinborough.org/CSS-Stress-Testing-and-Performance-Profiling

Тем временем вы правы, что хакерский пограничный образ является опцией. Посмотрите здесь:

Выполнить прокрутку с помощью свойства CSS3 box-shadow?

Ответ 2

Возможно, это не тень в коробке, возможно, что-то еще в вашем приложении просто потребляет слишком много ресурсов, а тень окна просто вишня сверху.

Тем не менее, я могу подтвердить, что явная тень на слишком длинных или больших элементах вызывает проблемы с производительностью. Я работаю над определенным разработчиком форм drag'n'drop и пытался установить коробку-тень на div 900px x 1000px, и прокрутка начала немедленно отставать. Ours - очень тяжелое веб-приложение ajax, поэтому другие могут позволить себе получить лучшие результаты, но все же, я думаю, что это пример.

Итак, я пошел в старую школу и создал образы. Я думаю, что самый правильный способ получить тени из ящика изображений, работающие без слишком большой загрузки изображения, - это иметь элемент с фиксированной шириной.

То, что я сделал, было три среза изображения. Один фрагмент сверху и чуть ниже верхних углов, один снизу до чуть выше нижних углов и один тонкий срез из середины, который я использовал на div в качестве фонового изображения с повторением-y, чтобы я мог динамически изменять высоту divs подходит для страницы пользователей.

Вы можете нарезать еще больше, чтобы соответствовать любой коробке, но она становится слишком большой (по крайней мере, 5 дополнительных изображений и 8 дополнительных divs, если быть точным) для box-shadow imo.