CSS анимация по ключевым кадрам с изменением размера фона не работает на мобильном устройстве - PullRequest
Новая
       23

CSS анимация по ключевым кадрам с изменением размера фона не работает на мобильном устройстве

3 голосов
/ 03 апреля 2019

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

Справочная информация

Я реализую простую наглядную демонстрацию алгоритма Q-обучения с использованием Javascript, Vue.js и SCSS.Демонстрацию можно посмотреть здесь: https://codepen.io/gkevinb/pen/mvYwWK

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

Проблема

Моя проблема в том, что робот, падающий в лунку, не работает на мобильных устройствах.Однако, например, когда робот достигает награды, эта анимация работает на мобильных устройствах.Мобильные устройства, на которых он не работает, включают Iphone 6s и Ipad, и я получаю к нему доступ через Safari. 

/*
    Animation for robot falling down the hole.
*/
@keyframes falling {
    0% { background-size: 100% 100%; }
    100% { background-size: 0% 0%; }
}

.tile--robot--falling{
    @include tileSize();
    @include backgroundImage("robot-2", "#{$robot_size}");

    background-color: $cliff_color;

    /* Robot falling animation */
    animation-name: falling;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
}

1 Ответ

0 голосов
/ 15 июня 2019

Я нашел решение! Проблема в том, что на мобильном телефоне есть некоторые проблемы со свойством background-size. Лучший способ обойти это вместо изменения размера фона изменить размер всего div, который содержит фоновое изображение. 

/*
    Animation for robot falling down the hole.
*/
@keyframes falling {
    0% {
        height: 100%;
        width: 100%; 
    }
    100% {
        height: 0%;
        width: 0%;
    }
}

.tile--robot--falling{
    @include tileSize();
    @include backgroundImage("robot-2", "#{$robot_size}");

    background-color: $cliff_color;

    /* Robot falling animation */
    animation-name: falling;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;

    /* Needed for keeping falling animation in the center */
    background-size: cover;

    /* Turn off Q-value divs for this tile */
    div{
        display: none;
    }
}

Я обновил демонстрационную версию своего алгоритма Q-Learning (https://codepen.io/gkevinb/pen/mvYwWK), и полное решение можно найти там.

...