Chrome下transition遇到<input type="text" />的诡异问题

如图,每次刷新就表现出了动画,而且貌似是从浏览器默认样式过度到我写的样式,比如字体从16到14,a标签的颜色从默认的蓝色过度到黑色。
录屏

只要把搜索里面的文本框去掉,就一切正常了。
请教这是什么问题啊!太诡异了,其他浏览器没问题。

<div class="menu clearfix">
    <ul class="top-menu-list fl clearfix">
        <li class="active">
            <a href="###">首页</a>
        </li>
    </ul>
    <div class="top-search-box fr clearfix">
        <!--<input type="text" placeholder="搜索..." class="fl" />-->
        <div class="text fl" contenteditable="true">搜索...</div>
        <button class="fr">OK</button>
    </div>
</div>
.top-menu-list > li > a { transition: all .4s; }
阅读 5.2k
5 个回答

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

stackoverflow

可以的话,贴代码出来看一下

临时找到了答案:
需要transition的属性,直接写在页面里,这样就避免了Chrome套用默认样式;把all换成具体的属性。

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