移动设备无法使用CSS关键帧动画并更改背景大小

Question

首先，这是我在Stack Overflow上发布的第一篇文章，因此我会尽力以尽可能清晰地描述我的问题。

背景信息

我正在使用Javascript、Vue.js和SCSS实现Q-learning算法的简单可视化演示。可以在此处查看演示: 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;
}

- gkevinb

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-Learning算法演示（https://codepen.io/gkevinb/pen/mvYwWK），完整的解决方案可以在那里找到。

- gkevinb