在添加表单元素时，网页加载时Chrome转换会触发 [英] Chrome transition fires on page load when form element added
问题描述
Google Chrome 36.0.1985.143似乎存在错误，或者我在这里缺少一些东西。 Firefox和Safari似乎可以正常运行。
在下面的HTML文档中存在表单元素时，Css转换似乎在文档加载时触发：
<！DOCTYPE html>
< html>
< head>
< link rel =stylesheethref =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> 元素在样式表规则在文档的head部分内嵌时排除或，如下所示：
< 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>
这是一个实际的错误，还是我做错了？
PS：我没有启用扩展程序，此行为也以隐身模式显示。
此外，这个问题显示文档是否通过文件夹在浏览器中简单打开或从实际的Apache缓存服务器提供。
当我重新创建'bug'来自类似的问题： CSS transition在外部样式表中定义导致页面加载的过渡它似乎是固定的。直到我将transition属性更改为background-color和ofcourse，添加< form>< / form> 元素..
$ b b
更新：似乎这是Chrome中的实际错误。已报告此处和此处。虽然他们不会修复它的任何时间很快。任何人都知道一个简单的（css）黑客/修复这个？
UPDATE2：另一个演示
我整天都在同一个问题上挣扎。我发现还讨论了这里和一个的评论者说 - 这里。第二个帮助了我很多。
所提到的解决方法是向正文添加 .preload
< body class =preload>
禁用所有转换
.preload * {
-webkit-transition：none！important;
-moz-transition：none！important;
-ms-transition：none！important;
-o-transition：none！important;
}
，然后使用JS（jQuery）删除它以恢复转换： p>
$（window）。load（function（）{
$（body）。removeClass ）;
}）;不幸的是，我在使用外部CSS文件时找不到CSS解决方案。
b $ b
There seems to be a bug with Google Chrome version 36.0.1985.143 or am I missing something here. Firefox and Safari seem to work as expected.
Checkout a Demonstration video on Vimeo
Css transitions seem to fire on document load when a form element is present in the following html document:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div></div>
<form></form>
</body>
</html>
And a simple css file: 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;
}
The transition stops firing when the <form></form> element is removed or when the stylesheet rules are placed inline within the head section of the document like so:
<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>
Is this an actual bug, or am I doing something wrong?
P.S: I have no extensions enabled and this behaviour also shows in incognito mode. Also, this problems shows whether or not the document is simply opened in the browser via a folder or served from an actual apache webserver.
When I recreate the 'bug' from a similar question: CSS transition defined in external stylesheet causes transition on page load it seems to be fixed. Untill I changed the transition property to background-color and ofcourse adding the <form></form> element..
UPDATE: Seems it's an actual bug in Chrome. Reported here and here. Although they will not fix it any time soon. Anyone know a simple (css) hack/fix for this?
UPDATE2: Another Demo
I was struggling with the same issue the whole day. I've found it was also discussed here and as one of the commenters said - here. The second one helped me a lot.
The workaround mentioned is to add a .preload class to the body
<body class="preload">
which disables all transitions
.preload * {
-webkit-transition: none !important;
-moz-transition: none !important;
-ms-transition: none !important;
-o-transition: none !important;
}
and then remove it with JS (jQuery) to restore the transitions:
$("window").load(function() {
$("body").removeClass("preload");
});
Unfortunately I couldn't find a CSS only solution when using external CSS file.
这篇关于在添加表单元素时，网页加载时Chrome转换会触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
