以下是要复制的html / css：

Question

以下是要复制的html / css：

index.html

<!DOCTYPE html>
<html lang="fr">
<head>
    <link rel="stylesheet" href="./style.css"/>
</head>
<body>
    <div class="foo">Mmh... sexy!</div>
</body>
</html>

style.css

.foo {
    width: 500px;
    height: 500px;
    line-height: 500px;
    color: #fff;
    font-size: 50px;
    text-align: center;
    background: #f0f;
    transform: scale(0);
    transition: transform 4s;
}

复制步骤：

将这两个文件保存在同一位置，并在Opera中打开index.html
复制网址，打开新标签，粘贴网址并有效

实际结果：

您会看到一个粉红色的正方形按比例缩小

预期结果：

页面应为空白（例如在chrome，firefox或任何其他浏览器中）。

实际发生的事情：

对transform属性进行动画处理，就好像div的初始状态是transform: none，而其实际初始状态是transform: scale(0)。

重新加载页面时永远不会发生。仅当您在新标签页中打开该网站或将该网站加载到另一个网站（例如“ https://google.fr”之后再加载该网站）之后。

此外，有趣的是，如果直接在html中复制/粘贴css（在<style>的{{1}}标签中），一切都会正常运行。

该错误似乎与webkit有关，因为我可以在具有复杂布局的Chrome上重现该错误。

例如，我正在苦苦挣扎的这个网站：https://hinderer-wolff.fr/

第一次打开它时，会缩小一个白色矩形，标题会向前动画，然后消失，然后突然出现而没有过渡。

如果重新加载页面，则动画是完美的，并且没有白色矩形。

CSS转换会在Opera加载时发生（但不应加载）

以下是要复制的html / css：

复制步骤：

实际结果：

预期结果：

实际发生的事情：

0 个答案: