Анимация ползунка Swiper + маска SVG изменяют производительность только на дисплее RETINA - PullRequest
2 голосов
/ 25 октября 2019

Мне нужна помощь с производительностью анимации на дисплее 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 для преобразования маски (в демонстрационном примере кодекса я использую эту опцию, так как кода меньше) К сожалению, оба варианта по-прежнему отстают на дисплее сетчатки.

Ничего не улучшаетсяпроизводительность на дисплее сетчатки, и у меня заканчиваются варианты.

Я был бы очень признателен, если кто-то может помочь!

Спасибо

...