Почему filter: drop-shadow() тормозит Сафари?

Question

[corasao]

На нескольких проектах сталкивался со следующей проблемой:
CSS свойство filter: drop-shadow() (ну или -webkit-filter: drop-shadow() или они оба) тормозит работу некоторых элементов сайта в браузере Сафари. В хроме все работает отлично, но вот в Сафари возникает торможение, ну или задержка в доли секунды для таких операций как появление выпадающих списков меню при наведении, или выезд мобильного меню при клике на бургер меню, тоже при складывании бургер меню с 3 полосок в крестик и т.д.
Ранее удавалось переиграть это заменив filter: drop-shadow() на box-shadow, но в данном проекте много многоугольных фигур, которые должны обтекаться тенью, и тут на box-shadow заменить не вариант.

Кто сталкивался с данной проблемой? Как вам удалось ее решить?

Comments

[Вадим]

Кто сталкивался с данной проблемой?

Все кто не понимает какие свойства когда и в каком количестве стоит использовать

Как вам удалось ее решить?

Перестать использовать тяжёлые не оптимизированные свойства в большом количестве и при интерактивности.
Ну и можно попробовать выносить их на видеокарту, предупреждать браузер что нужно выделить доп. ресурсы с помощью will-change и другие методы оптимизации вплоть до вынесения таких "красивостей" в картинки.

[corasao]

Вадим, спасибо, will-change помогло. Посмотрим как будет вести себя сайт после выгрузки на хост, возможно таки придется попрощаться с filter: drop-shadow()
Так же помогает transform: translate3d(0, 0, 0) для элемента с фильтром. Но кажется, что will-change лучше подходит.
Проблема возникает на макбуках до 2015 года. И сбрасывать сейчас их со счетов пока рановато.

[Вадим]

corasao, transform 3d 0 0 0 это хак для вынесения расчётов на видеокарту, will change немного другое. Ничто не мешает использовать их оба одновременно

[corasao]

Evgenii, "и все их делать надо в SVG, соотв и тень задавать там же"

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

На данном этапе мне помогло использование для элемента с фильтром will-change: filter; и/или transform: translate3d(0, 0, 0). Но нужно смотреть как будет вести себя сайт после подключения CMS и выгрузки на хост. Возможно придется все таки отключать filter: drop-shadow()

[corasao]

Вадим, спасибо, так и сделаю