0

Делаю сайт со слайдером, где используется 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.

1 ответ 1

0

Всё-таки дело было в префиксе: '-webkit-backface-visibility: hidden;' в стилях плагина у дорожки со слайдами это свойство было без префикса, а там происходила 3d трансформация, из-за которой "исчезала" моя, в старых версиях safari.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.