Всем привет! Почему filter: blur() / filter: dropshdow() вызывает просадку fps

Question

Всем привет! Почему filter: blur() / filter: dropshdow() вызывает просадку fps

на ios/macos?

Причем не важно filter: blur() задан на div элементе. Или в svg изображении есть тень на фигуре. Все это вызывает просадку fps на ios или жесткие зависания на macos с разгоном вентиляторов для того чтобы можно было полететь в космос.

Вот пример которые вызывают просадку на ios/macos пример на codepen (Там комментарии есть в html и в css дополнительные)

Причем на windows/android все замечательно

#css #frontend #html #programming #russian

0

16.09.2022

3 ответов

22 просмотра

Сергей Автор вопроса

BabyFrontent.ru Admin
Функции рендеринга в принципе сильно нагружают дви...

Я проверил все на iphone 13, iphone 12 mini, iphone xr (2x), iphone 8. И на macbook 15 pro. И на всех их ситуация одна, из за кругов все зависает. На windows ноутбуках (2x) и android все летает)) Я заменил эти круги на png формат, все стало отлично. Но есть такой svg элемент: Если его анимировать без теней все работает отлично, если добавить тень на каждую шестеренку то плавность анимации теряется

0

16.09.2022

BabyFrontent.ru Admin

Сергей
Я проверил все на iphone 13, iphone 12 mini, iphon...

Вероятно, тут проблема в целом в большом количестве вычислений, которые производятся для отрисовки этих SVG и также для работы функции filter и тут дело не в ОС а в браузере, также в количестве процессов, запущенных на устройстве, количестве открытых вкладок и пр. - всё это кушает ресурсы

0

16.09.2022

BabyFrontent.ru Admin · Accepted Answer

BabyFrontent.ru Admin

Функции рендеринга в принципе сильно нагружают движок браузера, их лучше не использовать, если есть альтернатива в виде изображений Почему именно на Мак- сложно сказать, нужно сперва понять, действительно ли это так (я сомневаюсь)

0

16.09.2022

169 похожих чатов

Всем привет! Почему filter: blur() / filter: dropshdow() вызывает просадку fps

3 ответов

Похожие вопросы