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元素,也不会闪动。

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

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

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

加上这句 就ok了

<script>0</script>

html 中加入 script 标签可以解决
例如:<script>0</script>

stackoverflow

  • WEB页面如何实现拖拽文件夹上传
  • requirejs angularjs 怎么调用$apply
  • 使用eslint怎么限制函数里的代码行数
  • Reactjs中报错: refs is not defined问题
  • 如何调用微信扫一扫扫描二维码
  • readFileSync不解析\n吗?有办法让他自动转吗?
  • 如果验证表单之后再提交ajax?
  • plupload 在手机端无法上传
  • babel with webstorm and webpack
  • javascript的undefined
  • mac下安装express失败