css - input中transition 设置background-color过渡，chrome浏览器页面初始化渲染会有过度效果

问题描述

.search-input{width: 241px;padding: 5px 32px 5px 12px;border: 1px solid #fd2d59;border-radius: 18px;border-color: #ebebeb;background-color: #f7f7f7;font-size: 12px;line-height: 18px;-webkit-transition: background-color .5s ease-in-out 0s;-moz-transition: background-color .5s ease-in-out 0s;-o-transition: background-color .5s ease-in-out 0s;transition: background-color .5s ease-in-out 0s;&:focus{ background-color: #fff;} }

问题解答

你这是SASS？看见里面套了个

&:focus{ background-color: #fff;}

如果浏览器一打开，这个input就自动获得焦点了，那么就会立马改变背景色了，并不是浏览器初始化的问题

chrome的已知bug，谷歌一直未修复，html 中加入 script 标签可以解决例如：<script>0</script>

stackoverflow