Мигает / не отображается анимация спрайта css на iPhone 7/8 (работает неправильно) - PullRequest
Новая
       34

Мигает / не отображается анимация спрайта css на iPhone 7/8 (работает неправильно)

0 голосов
/ 06 декабря 2018

Это должна быть анимация плавного движения робота, но на iPhone 6/7 картинка вообще не появляется.Если я начну изменять background-size элемента, картинка будет иногда мигать.

Когда я устанавливаю только спрайт без сетчатки (drone.png) вместо (drone@2x.png) для iPhone - анимацияотображается правильно.

Кстати, drone@2x.png отлично работает для всех устройств, кроме iPhone 7,8

Существует два спрайта для экранов сетчатки и без сетчатки:

  • drone.png: 5900x600
  • drone@2x.png: 11800x1200

HTML для всплывающего окна: 

<div class="popup" style="padding-top:110px;">
<div class="popup__deliveryman" style="background-position-y: -200px; left: 40%;"></div>
</div>

со стилями: 

  .popup__deliveryman {
    left: -1px;
    top: 0;
    padding: 0;
    line-height: 0;
    background-image: url("/static/drone.png");
    background-image: -webkit-image-set(url("/static/drone.png") 1x, url("/static/drone@2x.png") 2x);
    background-size: 5900px;
    animation: delivery-robot 3s steps(59) infinite;
    margin: 0 0 0 -80px;
    position: absolute;
    width: 100px;
    height: 100px;
  }

  @keyframes delivery-robot {
    0% {
      background-position-x: 0
    }

    to {
      background-position-x: -5900px
    }
  }
...