前端 - 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; }

解决方案

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

stackoverflow

这篇关于前端 - Chrome下transition遇到<input type="text" />的诡异问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！