inline-block元素在overflow:hidden状态下由于vertical-align引起的一个bug
2017-04-20 00:28

inline-block引起的一个问题

今天在写代码的时候碰到一个问题,是由inline-block引起的。在代码中使用jquery的animate实现一个动画,改变一个inline-block的宽,高。

$(".ds_submenu").click(function(){
    var rect=this.getBoundingClientRect();
    $(this).animate({width:rect.width,height:rect.height},500);
});
<div class="ds_wrapper">
    <ul>
        <li class="ds_li">
            <div class="ds_menu">首页</div>
            <div class="ds_subcont">
                <div class="ds_submenu">
                    css文章
                </div>
                <div class="ds_submenu">
                    js文章
                </div>
                <div class="ds_submenu">
                    svg教程
                </div>
                <div class="ds_submenu">
                    canvas资料
                </div>
            </div>
        </li>

    </ul>
</div>
.ds_submenu{
    margin:5px 0;
    display:inline-block;
    white-space:nowrap;
    width:100%;
    box-sizing:border-box;
    background:#f1c40f;
    color:#fff;
    font-size:13px;
    padding:0 8px;

    cursor:default;
    line-height:32px;
    -webkit-user-select: none;
    user-select: none;
    -moz-user-select: none;
}

代码大致如上,ds_submenu元素是inline-block的,而js代码的动画animate的效果预期应该没有动作。而实际中点击效果确实有跳动的。

blob.png

点击后ds_submenu元素距离下面的距离明显变高出现跳动,在动画结束后又回归回去。

查看了一下jquery的animate源码,最后得出结论是inline-block导致的这个现象,如下的代码也会出现这种问题:

$(".ds_submenu").click(function(){
    var rect=this.getBoundingClientRect();
    $(this).css({width:rect.width,height:rect.height,overflow:"hidden"});
});

这个代码实现的跳动现象,你可以查看这个demo:inline-block和overflow:hidden引起的问题

这种问题经测试,在IE,chrome下都存在,火狐由于没安装,所以没测试,预计也会有这种问题。

这个问题出现的原因是display:inline-block和overflow:hidden以及vertical-align:baseline导致的。

所以如果只要这三个条件不是同时满足就不会出现这种问题。inline-block改为block就不会出现这种问题,把vertical-align改为“top/bottom/middle”都能解决这个问题,去除overflow:hidden,也能解决这个问题。

至于这个问题涉及的浏览器渲染机制的原因,我就不得而知了。而且veritcal-align,overflow这两个样式比较重要,在我们的布局或者效果中,如果遇到什么期望之外的现象,你应该首先考虑这两个样式,如果确实是这两个样式导致的问题,那么就可以节约很多时间。我今天碰到这个问题的时候,就是因为没有往这方面想,以为是jquery的animate内部有什么特殊处理导致的,进而花费了很多时间在jquery的逻辑上。

原创文章,转载请注明来自:妹纸前端-www.webfront-js.com.
阅读(2564)
辛苦了,打赏喝个咖啡
微信
支付宝
妹纸前端
妹纸前端工作室 | 文章不断更新中
京ICP备16005385号-1