очень медленные CSS3 box-shadows в Chrome

Question

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

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

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

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

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

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

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

Answer 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?

Answer 2

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

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

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

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

Вы можете нарезать еще больше, чтобы уместить любую коробку, но это становится слишком много (по крайней мере, 5 дополнительных изображений и 8 дополнительных делений, если быть точным) для имитации с тенью коробки.