Question

Google Chrome版本36.0.1985.143似乎存在错误，或者我在这里遗漏了一些内容。 Firefox和Safari似乎按预期工作。

当以下html文档中存在表单元素时，Css转换似乎会触发文档加载：

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="style.css" />
    </head>
    <body>
        <div></div>
        <form></form>
    </body>
</html>

一个简单的css文件：style.css

div {
    -webkit-transition:background-color 2s;
       -moz-transition:background-color 2s;
         -o-transition:background-color 2s;
            transition:background-color 2s;
    width: 188px;
    height: 188px;
    background-color: red;
    margin: 0 auto;
}
div:hover {
    background-color: green;
}

当样式表规则内嵌在文档的head部分中时，当<form></form>元素被移除或时，转换会停止触发，如下所示：

<style>
    div {
        -webkit-transition:background-color 2s;
           -moz-transition:background-color 2s;
             -o-transition:background-color 2s;
                transition:background-color 2s;
        width: 188px;
        height: 188px;
        background-color: red;
    }
</style>

这是一个真正的错误，还是我做错了什么？

P.S：我没有启用扩展程序，此行为也会以隐身模式显示。此外，此问题还显示文档是通过文件夹在浏览器中打开还是从实际的apache Web服务器提供。

当我从类似的问题重新创建'bug'时：CSS transition defined in external stylesheet causes transition on page load它似乎是固定的。直到我将过渡属性更改为background-color和ofcourse添加<form></form>元素..

更新：似乎这是Chrome中的实际错误。已报告here和here。虽然他们不会很快修复它。任何人都知道一个简单的（CSS）黑客/修复？

UPDATE2：Another Demo

Answer 1

最简单的解决方法是使用单个空格向页脚添加脚本标记。

{{1}}

Answer 2

我整天都在努力解决同样的问题。我发现它也被讨论here，并且正如其中一位评论者所说的那样 - here。第二个帮助了我很多。

提到的解决方法是将 .preload 类添加到正文

<body class="preload">

禁用所有转换

.preload * {
 -webkit-transition: none !important;
 -moz-transition: none !important;
 -ms-transition: none !important;
 -o-transition: none !important;
}

然后用JS（jQuery）删除它以恢复转换：

$("window").load(function() {
  $("body").removeClass("preload");
});

不幸的是，在使用外部CSS文件时，我无法找到仅限CSS的解决方案。

Answer 3

我遇到了同样的问题，最后决定唯一可接受的解决方案是在样式标签中重新定义div的颜色，如下所示：

<style>
    div {
        background-color: red;
    }
</style>

所以html代码不是太脏，这是一个小修复，即使如果他们可以解决这个bug也会很好

Answer 4

解决此问题的最佳方法是使用spencer.sm在答案中找到的单个空格，空<script>修复。但是我找到了另外两种方法来解决这个问题。

将违规元素的CSS放在HTML文件标题中的<style>标记内。只有从外部样式表调用CSS时才会出现该错误。
将有问题的元素放在flexbox容器中。这也解决了这个问题。

添加表单元素时，Chrome加载会在页面加载时触发

4 个答案: