Почему «Моргают» слои анимации на mac'ах?

Question

[Артур Кранц]

Проблема: на safari и iphone'ах бордеры и слои "черной дыры" моргают 2 раза за оборот + в некоторых браузерах съезжают. Моргают они на лайв проекте доступного по ссылке - https://beta.sintez.io

По бордерам наши прогеры специально собрали кнопку на codepen. Тут есть код как собрана кнопка. (https://codepen.io/koszayats/pen/zQzJPW)

При открытии на codeopen, бордеры вроде как не моргают, но соль в том, что на более слабом андроиде ничего не лагает и работает корректно, а вот стоит открыть на iphone, даже мощнее андроида, все начинает лагать просто дико. Очень сильно нужно найти решение этого вопроса, ибо не хочется для мобилок делать статику 8(((

Comments

[Ivan Bogachev]

Нет под рукой iOS-устройств чтобы проверить, но сказал бы, что стоит поиграть со свойствами

will-change: transform;
backface-visibility: hidden;

и может быть
transform-style: preserve-3d;
у псевдоэлемента ::before.

И не совсем понятно, зачем там background-clip и mask-image.

[Артур Кранц]

Ivan Bogachev, спасибо, попробуем

Answer 1

[Анатолий Куликов]

Какой конкретно браузер на маке? На моем хроме нет проблемы (в кнопках, зато со слайдами есть проблемчики).
Если у вас лагает на Safari, то нужно читать документацию - скорее всего проблема там, копать в сторону проблем реализации анимации&градиентов.

Comments

[Артур Кранц]

Safari на Маках и Chrome/Safari на iphone'ах

[Анатолий Куликов]

Хм, да, баг есть... Единственное, что могу посоветовать - сделать на svg, поскольку тут не до конца анимация отрабатывает. Возможно, проблема в том, что могут быть проблемы в полной поддержке (не знаю тонкостей, не копал так глубоко).

Самому интересно стало, но в лоб информации не нашел, хотя на caniuse есть инфа не про полную поддержку.