Анимирование свойства 'transform' на safari(ios 9-10)

130
29 августа 2019, 16:50

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

Answer 1

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

READ ALSO
При помощи Grid сделать список в строку

При помощи Grid сделать список в строку

Не соображу как при помощи Grid сделать список в строку (количество элементов LI неизвестно, генерируется автоматически)

150
Как настроить задний фон у графика?

Как настроить задний фон у графика?

Есть график на amchart4Выглядит он вот так:

143
Добавление рандомного числа при клике. jQuery [закрыт]

Добавление рандомного числа при клике. jQuery [закрыт]

Нужно при клике добавить рандомное число в таблицу,в следующем клике,надо этой числе добавить 1Надо при клике на другую клетку,добавить другое...

126
Выполнить JavaScript после выполнения Yandex Metrika и прочих пикселей и счётчиков

Выполнить JavaScript после выполнения Yandex Metrika и прочих пикселей и счётчиков

Как выполнить некий JS код, скажем alert() только после того как DOM загружен, $(document)ready(), $(window)

104