Почему blur в css, или filter в svg вызывает жесткую просадку в ios/macos?

Question

[wakenbyWork]

https://codepen.io/wakenby/pen/PoeWMYd?editors=1100



По дизайну на странице, на заднем плане есть размытые круги. Их 5 штук. И они вызывают просадку в IOS/macOS, из за чего все анимации на странице работают очень дергано. При отключении их, все становится нормально. Но я не понимаю в чем проблема на macOS/IOS, ибо на windows/android все отлично.

Я отключал js полностью, чтобы исключить утечки от туда, ситуация не изменилась. Все из за filter в svg, или в css.

Так-же есть особенности:

1) Если круги делать через div+filter (в примере есть) то на ios они чисто на приколе отрабатывают. Какая-то часть может появится, всегда разная, или вообще не появиться как будто их нет.

2) Если круги выгружать в svg, и подключать их через img, то на ios они будут видны всегда, но все анимации на страницы все равно из за них будут дергаными, а macOS вообще будет лететь в космос по звукам вентилятора.

Если убрать все круги, то все отлично становится, все анимации плавно работают. Но после появления на анимированном элементе тени, на ios она начинает дергано работать:

С тенью зависает на ios

Без тени анимация работает нормально на ios

Comments

[Александр Цымбал]

Вопрос не к технологиям, а к браузеру. Вероятно, Safari не очень хорошо справляется с такими штуками. Safari вообще в плане поддержки эффектов позади остальных. Поэтому если делать кроссбраузерно, то лучше использовать растровые картинки с отрисованной на них тенью, чем делать тень с помощью CSS.

[wakenbyWork]

Александр Цымбал, Так и сделал)) Правда в примере с шетсиренками с тенью все равно лагает на 12 mini, пришлось для ios вырубать тень.

Но на ios/macos все браузеры это safari. Все другие это надстройки только

[Александр Цымбал]

wakenbyWork, да, с браузерами на apple-устройствах печально всё. вариант с выключением тени на iOS - вполне жизнеспособный. Если заказчику это объяснить, то всё ок. Потом надо еще дизайнеру объяснить, что так делать больше нельзя )))