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