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

Question

Привет,
на этот раз у меня довольно редкая проблема, возникающая только в Safari 5.0.2. При использовании параметра box-shadow в CSS3, производительность Safari настолько плохая, что вы даже не можете правильно прокрутить вниз или взаимодействовать с сайтом .

.

У меня есть <div class="blox"></div>, который имеет средний размер (960x320 пикселей), и это соответствующие настройки CSS:

        -moz-border-radius: 4px; /* FF1+ */
    -webkit-border-radius: 4px; /* Saf3-4 */
    border-radius: 4px; /* Opera 10.5, IE9, Saf5, Chrome */
    -moz-box-shadow: inset 0px 0px 140px #dfe1e2; /* FF3.5+ */
    -webkit-box-shadow: inset 0px 0px 140px #dfe1e2; /* Saf3.0+, Chrome */
    box-shadow: inset 0px 0px 140px #dfe1e2; /* Opera 10.5, IE9 */

Я пытался установить CSS3 box-shadow с помощью jQuery (.css ()), но результат был таким же (отставание). Да, и границы-радиуса это не вызывает (я отбросил его, протестировав его несколько раз).

Итак, есть ли какое-то решение для этого? Честно говоря, я шокирован, что браузер WebKit, такой как Safari, даже представляет такие проблемы. Я знаю, что должен быть способ, так как несколько веб-сайтов используют тени inset & outset и отлично работают в Safari. Я нашел сообщение здесь, в StackOverflow, в котором упоминается изображение коробки как решение ... однако это сообщение было довольно старым.

Я очень, очень ценю ваше время и поддержку.
Заранее большое спасибо!

Chris

Answer 1

Это известная проблема.Следуйте за выпуском 22102 в трекере ошибок WebKit («-webkit-box-shadow вызывает ужасную производительность прокрутки / изменения размера / перерисовки»), чтобы получать уведомления, когда оно исправлено.

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

Answer 2

Почему ты в шоке? Webkit может быть быстрым в реализации новых вещей, но в большинстве случаев он делает это очень ошибочно.

Во всяком случае, похоже, что вы пытаетесь подделать градиент с тенью от коробки. Лучше использовать CSS3-градиент ( синтаксис Moz | синтаксис Webkit | Поддержка Opera появится в ближайшее время и будет следовать синтаксису moz с префиксом -o) или фоновый рисунок.

Кроме того, отсутствует CSS-свойство box-image. Они могли означать border-image .