chrome下,如果页面存在input元素,则使用了transition的元素会先闪动一下?

页面html如下:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="a.css">
</head>
<body>
<input type="text">
<div></div>
</body>
</html>

a.css文件如下:

div{
    width: 500px;
    height: 100px;
    background: #f60;
    -webkit-transition: background linear .3s;
    transition: background linear .3s;
}
div:hover{
    background: #f00;
}

如果css使用的是style加载在html里,则不会闪动,link的方式则会闪动。如果没有input元素,也不会闪动。

阅读 5.4k
5 个回答

如果有绝对定位元素,会有闪动后消失的情况,可以加backface-visibility: hidden;属性来规避这个问题

版本50,没有这个问题。确定只是这些代码?

版本51,有这个问题。
推测是51版的chrome浏览器的解析差异(没有找到相关文档说明),link实际上原理也是加载完成后添加到到style,正常来说浏览器都会把link的css加载完之后才会继续往下渲染。

加上这句 就ok了

<script>0</script>

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题