Dan*_*Wit 9 html css forms google-chrome css-transitions
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;
}
当<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 Web服务器提供.
当我从一个类似的问题重新创建'bug'时:在外部样式表中定义的CSS转换导致页面加载转换似乎是固定的.直到我将过渡属性更改为background-color和ofcourse添加<form></form>元素..
更新:似乎这是Chrome中的一个实际错误.在这里和这里报道.虽然他们不会很快修复它.任何人都知道一个简单的(CSS)黑客/修复此事？
更新2:另一个演示
小智 4
我一整天都在为同样的问题苦苦挣扎。我发现这里也讨论了这个问题，正如一位评论者所说 -这里。第二个对我帮助很大。
提到的解决方法是将.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 的解决方案。
| 归档时间： |
|
| 查看次数： |
2418 次 |
| 最近记录： |