具有更改背景大小的 CSS 关键帧动画在移动设备上不起作用

Question

首先，这是我的第一篇 stackoverflow 帖子，因此我会尽最大努力尽可能准确地写下我的问题。

背景信息

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

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)，完整的解决方案可以在那里找到。