Question

编辑： 我刚刚发现它在SO代码段视图中可以正常工作。请复制代码并将其保存在本地。

编辑2： 很奇怪。请查看此gist和video。

我想要一个带有脉冲动画的徽标，但是当我使用Safari 11.1.1测试该徽标时遇到了一个奇怪的问题。它可以在Firefox 60.0.2和Chrome 67.0上正常运行。如果任何人都可以测试Edge和IE，请发布结果。

下面是一个缩小的代码段，应复制该问题。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
    <style>
    .foo-logo {
        height: 10rem;
        width: 10rem;
        margin: 2.5rem;
        background-color: red;
    }

    .foo-logo > p {
        color: white;
        font-size: 1.5rem;
        text-align: center;
    }

    .foo-animation {
        animation: pulse-animation 5s infinite;
    }

    @keyframes pulse-animation {
        0% {
            height: 10rem;
            width: 10rem;
            margin: 2.5rem;
        }
        50% {
            height: 15rem;
            width: 15rem;
            margin: 0rem;
        }
        100% {
            height: 10rem;
            width: 10rem;
            margin: 2.5rem;
        }
    }
    </style>
</head>
<body>
    <div class="foo-logo"><p>No animation</p></div>
    <div class="foo-logo foo-animation"><p>Animation</p></div>
</body>
</html>

如果您没有可用的Safari，以下是屏幕截图：

Answer 1

我已经在Safari中重现了该问题，对我来说，它似乎是一个Safari错误。因此，您可以提交错误报告并等待修复。
或尝试解决方法。我建议通过以下方式更新CSS：

.foo-logo {
    font-size: 1rem; 
    /* 1em == font-size, so 1em == 1rem here and you can use em further */
    height: 10em;
    width: 10em;
    margin: 2.5em;
    background-color: red;
}

@keyframes pulse-animation {
    /* Yes, you can omit 0% and 100% here */

    50% {
        width: 15em;  /* 1em == 1rem */
        height: 15em;
        margin: 0;
    }
}

.foo-logo > p {
    color: white;
    font-size: 1.5rem;
    text-align: center;
}

.foo-animation {
    animation: pulse-animation 5s infinite;
}

Safari使用Rem和动画的尺寸不正确

1 个答案: