Делаю сайт со слайдером, где используется transform для анимированного раскрытия карточек: сайт (самый первый слайдер). В safari на ios 9-10 есть проблема: карточки исчезают из-за свойства transform во время анимации, т.е. мигают. Сам слайдер использует тот же transform для прокрутки элементов-карточек. Добавление префиксов не помогло. Хочется найти самый консервативный вариант исправления подобной проблемы. Вот фрагмент кода из-за которого такое происходит:
.header__slider .glide__slide--active img,
.header__slider .glide__slide--active .controls button {
transform: translateX(-163px);
} .header__slider .glide__slide--active .controls button i {
transform: rotate(180deg);
}
.header__slider .glide__slide--active .text-box {
transform: translateX(255px);
}
.header__slider .glide__slide--active .border {
transform: translate(-153px, 10px);
width: 748px;
}
upd: дело оказалось исключительно в плагине-слайдере. Но всё равно хочется понять с технической точки зрения из-за чего такое получается, т.е. что может повлиять на рендеринг анимированного transform во время другой анимации(перемещение дорожки со слайдами). Плагин: glide.js.