CSS3 background-position анимация отстает на мобильных устройствах

Question

Я пытаюсь создать эффект прокрутки для фона с помощью CSS3-анимации, например:

body {
  background: url("bg.jpg") repeat-y 0 0;
  animation: animatedBackground 50s linear infinite;
}

@keyframes animatedBackground {
  from { background-position: 0 0; }
  to { background-position: 0 100%; }
}

( JSFiddle)

Это прекрасно работает, за исключением того, что это очень медленно на мобильных устройствах (например, Android Chrome 43.0). Я пробовал различные способы взлома, которые, как предполагается, заставляют браузер использовать графический процессор, что, к сожалению, не помогло.

Одним из решений является использование translateY и продублируйте изображение, как показано здесь. Это не очень хорошо, так как изображение довольно большое с самого начала. Это работает гладко, хотя.

Я ищу альтернативные решения о том, как сделать это гладко.

Answer 1

Вдохновленный ссылкой в OP, я нашел способ добиться этого, не имея нескольких ссылок на одно и то же изображение. Это, однако, требует, чтобы вы знали высоту изображения.

Общая идея состоит в том, чтобы иметь relative обертка, которая скрывает все переполнения, и заставляет изображение быть на 200% его высоты, и делает его repeat и, наконец, анимировать ось Y -100%. Пример:

#parallax-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#parallax-background {
  position: relative;
  width: 100%;
  height: @parallax-image-height * 2;
  background: url("/bundles/sunnerbergsimilarseries/images/tv-show-wall.jpg") repeat 0 0;
  animation: animatedBackground 50s linear infinite;
  transform: translate3d(0, 0, 0);
}

@keyframes animatedBackground {
  0% { transform: translateY(0) }
  100% { transform: translateY(-@parallax-image-height) }
}

( JSFiddle)

Вышеописанное работает так же гладко на Android-телефоне 2015 года, как и на компьютере с выделенной видеокартой.

Answer 2

Причина того, что transform работает плавно, в то время как background-position не то что transform может использовать аппаратное ускорение телефона в то время как background-position должен полагаться на повторную визуализацию элемента в программном обеспечении браузера. Даже если это большое изображение, аппаратное ускорение всегда лучше для мобильных устройств.

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

Так что используйте transform решение, и будьте уверены, что это правильное решение.