添加表单元素时，Chrome 转换在页面加载时触发答案

【问题标题】：Chrome transition fires on page load when form element added添加表单元素时，Chrome 转换在页面加载时触发
【发布时间】：2014-10-13 18:44:18
【问题描述】：

Google Chrome 版本 36.0.1985.143 似乎存在错误，或者我在这里遗漏了什么。 Firefox 和 Safari 似乎可以正常工作。

结帐Demonstration video on Vimeo

当以下 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;
}

当<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 网络服务器提供。

当我从类似的问题中重新创建“错误”时：CSS transition defined in external stylesheet causes transition on page load 它似乎已修复。直到我将过渡属性更改为背景颜色，当然添加了 <form></form> 元素..

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

更新2：Another Demo

【问题讨论】：

首先是什么导致了“过渡”？我认为我们缺少一些 CSS。
为了简化示例，我省略了转换的“原因”。我们可以添加一个额外的规则：div:hover { background-color: green; }。无论哪种方式，在我的浏览器中，它现在从白色变为红色，当悬停时变为绿色。
你能向我们演示一下这个问题吗？
@Paulie_D 我添加了一个演示错误的视频：vimeo.com/103906083 并链接到 Chrome 的实际错误报告。遗憾的是他们不会修复它。

标签： html css forms google-chrome css-transitions

【解决方案1】：

最简单的解决方法是在页面页脚中添加一个脚本标记并使用一个空格。

<script> </script>

【讨论】：

【解决方案2】：

我整天都在为同一个问题苦苦挣扎。我发现它也被讨论过here，正如其中一位评论者所说-here。第二个对我帮助很大。

提到的解决方法是在 body

中添加一个 .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 的解决方案。

【讨论】：

这没有提供问题的答案。要批评或要求作者澄清，请在他们的帖子下方发表评论 - 您可以随时评论自己的帖子，一旦您有足够的reputation，您就可以comment on any post。
抱歉，我想为讨论同一问题的问题提供指导，但我的个人资料没有足够的声誉，无法对作者的帖子发表评论。
尝试改进答案，希望现在更好。
@BoyanKostov 感谢您分享您的想法。就个人而言，我不喜欢需要 javascript 才能使其正常运行。但话又说回来，这是我们现在唯一的选择。也许如果我们都“明星”这个问题link 他们实际上会尝试修复它。
@DanieldeWit 也谢谢你。我同意 100%。为该问题加星标，我希望尽快修复该错误。

【解决方案3】：

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

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

所以 html 代码并不算太脏，这是一个小修复，尽管如果他们能解决这个 bug 那就太好了

【讨论】：

【解决方案4】：

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

将违规元素的 CSS 放在 HTML 文件标题的 <style> 标记内。仅当从外部样式表调用 CSS 时才会出现该错误。
将有问题的元素放在弹性盒容器中。这也修复了该错误。

【讨论】：