@wakenbyWork

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

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


  • Вопрос задан
  • 116 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы