Задержка прокрутки со свойством CSS3 box-shadow?

StackOverflow https://stackoverflow.com/questions/1249619

Вопрос

Я добавил box-shadow к разделу страницы недавно, чтобы придать ему тот же эффект теневой границы, который можно увидеть в приложениях Mac OS X.Выглядело это великолепно, но я заметил, что при прокрутке страницы вверх и вниз она тормозила.Обычно я вижу это только на страницах, которые имеют раздражающие фоновые изображения и множество изображений и встроенных видео, разбросанных повсюду (кашель MySpace кашель).Изначально я решил использовать box-shadow, так как полагал, что это избавит от необходимости использовать изображение и устранит любую возможность задержки прокрутки.

Я знаю, что CSS3 все еще новый, но в этом ли причина отставания?Тень визуализируется программно или что-то в этом роде?Когда я применяю тень блока к более мелким элементам, она вообще не запаздывает.Мне просто интересно, испытывал ли это кто-нибудь еще.

Я только что попробовал это на главной странице Stack Overflow, на #content div с использованием Firebug с настройкой:

-moz-box-shadow: 1px 1px 10px;

И после этого я заметил некоторую задержку прокрутки.Я использую Firefox 3.5.

Мой вопрос: каковы альтернативы использованию этого атрибута, если я хочу добавить рамку в стиле Mac OS X к разделу моей страницы?

Кстати, кто-нибудь знает, можно ли применить тень блока только к верхней, левой и правой сторонам элемента, а не к нижней?Я пытался 1px -1px 10px но тень по-прежнему видна внизу.Если я продолжу уменьшать второе смещение, в конечном итоге тень снизу будет удалена, но тогда верхняя тень станет намного темнее и больше.

И да, я видел статьи о box-shadow по адресу:

Это было полезно?

Решение

Лучше всего было бы использовать -moz-border-image вместо.Это должно решить обе ваши проблемы.

Например.вы можете использовать такое изображение, в сочетании с таким CSS

-moz-border-image: url(shadow.png) 10 / 10px;

создать свою тень.А поскольку вы используете изображение, вы также можете исключить нижнюю тень, если хотите.

Вы не сможете удалить тень снизу, используя -moz-box-shadow;его не зря называют «тенью коробки».Он применяет тень ко всему блоку.Вы не можете указать тень для каждой стороны отдельно, как в случае border, сказать.Лучшее, что вы можете сделать, это поэкспериментировать с размещением, размытием и распространением тени.Но это неизбежно приводит к появлению более темной тени на противоположной стороне.

Я также получаю задержку теней коробки, когда пробую ее на Stackoverflow.Это также влияет на производительность в Safari, когда я пытаюсь -webkit-box-shadow, хотя это не так заметно, как в Firefox.Надеюсь, в будущем производительность улучшится, но я предполагаю, что тень всегда будет иметь некоторый влияние, поскольку, насколько я знаю является отрисовано программное обеспечение.

Другие советы

Это было исправлено в webkit два дня назад.:)

https://bugs.webkit.org/show_bug.cgi?id=22102

Вы можете брать хром каждую ночь, чтобы опробовать его.

Я просмотрел FF3.6 и FF4 и не увидел там ужасной производительности прокрутки, так что эту проблему можно решить и там.

На данный момент проблема по-прежнему сохраняется в Chrome для Android.Некоторые комбинации box-shadow приводят к снижению производительности прокрутки.В моем случае объединение двух вставных теней (например,верх/низ) приводят к описанной проблеме.Единственное решение, которое я могу предложить, — это сделать тени коробок менее сложными и попробовать еще раз… у меня это сработало.Это неудовлетворительно, но да, вместо этого вы также можете использовать решение с изображением границы или полностью удалить затронутую тень блока.Надеюсь, это скоро исправят, наконец.Кстати, в Android-версии Firefox больше нет проблем (для моего css3).Более того, в моем случае настольные версии обоих браузеров не затронуты.

#shadow {
-moz-border-image: url(img.png) 10 / 10px; #Firefox under v15.0#
-webkit-border-image: url(img.png) 10 / 10px; #Safari, Chrome under v15.0, Android & iOS#
-o-border-image: url(img.png) 10 / 10px; #Opera under v15.0#
border-image: url(img.png) 10 / 10px; #IE v11+, other new Browser#
}

Кроссбраузерная версия для старого и нового браузера.Простое изображение: http://i28.tinypic.com/2njzkt1.png

стиль :зафиксированный для изображений слишком перегружается производительность браузера

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top