背景尺寸变化的CSS关键帧动画在移动设备上不起作用

Question

首先，这是我的第一篇stackoverflow帖子，所以我会尽我最大的努力准确地写出我的问题。

背景信息

我正在使用Javascript、Vue.js和SCSS实现Q学习算法的一个简单的可视化演示。演示可以在这里看到：https://codepen.io/gkevinb/pen/mvYwWK

通过按下探索按钮，机器人将探索该区域，并最终了解哪里可以找到奖励。如果机器人踩到了黑色的瓷砖，它就会掉进洞里。如果机器人摔倒了，请再次按explore开始再次探索。

问题

我的问题是机器人掉进洞里的动画不能在移动设备上工作。然而，例如，当机器人到达奖励时，该动画就会在移动设备上工作。它不能使用的移动设备包括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;
}

Answer 1

我已经找到解决方案了！问题是，在移动设备上，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学习算法演示(https://codepen.io/gkevinb/pen/mvYwWK)，完整的解决方案可以在那里找到。