Блог

Главная - Вопросы по программированию - Бесконечная прокрутка чистого CSS не работает на мобильных устройствах

Бесконечная прокрутка чистого CSS не работает на мобильных устройствах

#css

#css

Вопрос:

Я использую CSS для автоматической прокрутки панорамного изображения. Он отлично работает на настольных компьютерах, но не на мобильных устройствах.

Вот мой код:

 .panorama-new {
  overflow: hidden;
  border-radius: 0.5rem;
  width: 100%;
  height: 560px;
}
.sliding-background {
  background: url(https://upload.wikimedia.org/wikipedia/commons/7/76/National_Stadium_panorama.jpg) repeat-x;
  height: 560px; /* original 560 */
  width: 16648px;
  animation: slide 60s linear infinite;
}
@keyframes slide {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-8324px, 0, 0);
      }
}  
 <div class="panorama-new">
  <div class="sliding-background"></div>
</div>

Комментарии:

1. Я протестировал его на мобильных устройствах и на рабочем столе, он работает нормально. В чем проблема снова?

2. @evilReiko изображение вообще не отображается в Chrome для Android. Какой браузер вы используете?

3. Я тестировал на iPhone / Chrome