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

似乎有一个bug与谷歌浏览器版本36.0.1985.143或我错过了一些东西在这里。Firefox和Safari似乎可以正常工作

在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>

这是一个真正的bug，还是我做错了什么?

p。S:我没有启用扩展，并且这种行为在隐身模式下也会显示。此外，这个问题显示了文档是否只是通过一个文件夹在浏览器中打开，还是从一个实际的apache web服务器提供。

当我从一个类似的问题中重新创建"bug"时:在外部样式表中定义的CSS过渡导致页面加载时的过渡似乎是固定的。直到我把过渡属性改为background-color，当然还添加了<form></form>元素…

更新:这似乎是一个真正的bug在Chrome。这里和这里都有报道。虽然他们不会很快修复它。有人知道一个简单的(css) hack/fix吗?

UPDATE2: Another Demo

最简单的解决方法是在页脚添加一个带有单个空格的script标签。

<script> </script>

我一整天都在纠结同一个问题。我发现这里也讨论过这个问题，就像一位评论者说的——这里。第二个对我帮助很大。

上面提到的解决方法是添加一个。预加载类到体

<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唯一的解决方案。

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

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

所以html代码不是太脏，这是一个小的修复，即使这将是伟大的，如果他们能解决这个错误

解决这个问题的最好方法是使用spicer .sm的答案中发现的单个空格，空<script>修复。然而，我发现了另外两种方法来解决这个问题。

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

相关内容

最新更新

热门标签：