Прокрутка с задержкой с CSS3 box-shadow свойство?

Question

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

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

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

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

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

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

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

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

• Информация CSS3
• Блог Фредерики

Answer 1

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

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

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

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

---

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

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

Answer 2

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

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

Вы можете взять хром на ночь, чтобы попробовать его.

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

Answer 3

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

Answer 4

#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#
}

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

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