Мне нужна помощь с производительностью анимации на дисплее RETINA
У меня есть ползунок swiper и на slideTranasitionStart Я анимирую маску (охватывающую весь ползунок).
Ссылка на кодовую ссылку здесь.
Анимация очень плавная во всех браузерах. Я использую внешний монитор для работы, но как только я перетаскиваю окно браузера на свой дисплей Retina (MacBook Pro -Retina, 13-дюймовый, начало 2015 года, macOS Mojave), анимация выглядит очень медленной (самый низкий fps составляет около 5-6!)!
Я попробовал 2 основных варианта анимации:
Добавление классов для преобразования маски (и только с использованием самых эффективных свойств css transform и opacity наанимированные элементы). Для этой опции я попытался добавить свойство will-change для анимированных элементов, я заменил translateX на translate3d, я только добавил переход к свойству transform. Использование плагина greensock morphSVG для преобразования маски (в демонстрационном примере кодекса я использую эту опцию, так как кода меньше) К сожалению, оба варианта по-прежнему отстают на дисплее сетчатки.
Ничего не улучшаетсяпроизводительность на дисплее сетчатки, и у меня заканчиваются варианты.
Я был бы очень признателен, если кто-то может помочь!
Спасибо