javascript - jQuery filter(":visible") messes with width in Chrome -


i've noticed weird behavior of jquery's filter(":visible) when applied on element overflow auto later reset hidden (in chrome).

https://jsfiddle.net/80wxkhbo/2/, https://jsfiddle.net/80wxkhbo/3/

the intention of code take element (the overflow of previously, other code, set hidden), find child , stretch it, full available height of parent.

the example simplified as gets. point of question (bug report, maybe?) when apply filter(:visible) on (the parent, child element), if don't use in way, shape, or form, header's width smaller parent (by scrollbar's width). if, however, remove filter, or if oveflow reset before filtering takes place (like here https://jsfiddle.net/80wxkhbo/4/), result expected (and other browsers handle it).

any idea why happening? (chrome version 48.0.2564.97 m) , happen in other chrome versions too? elegant solution prevent bad behavior other making sure overflow set requested before filter applied?

source code:

$(".container").css({  	overflow: "auto"  });    // comment line (which nothing , see width of header in chrome)  // should nothing - not assigned variable, nor action called  // - yet makes header shrink scrollbar width...  $(".container").filter(":visible");    // set overflow hidden  $(".container").css({  	overflow: "hidden"  });    $(".content").css({  	overflow: "auto",    height: "450px"  });
.container { height:500px; color:white; }  .head { background:red; height:50px; }  .longcontent { background:orange; height:1000px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>  <div class='container'>  <div class='head'>some header</div>  <div class='content'>    <div class='longcontent'>some long content</div>  </div>


Comments

Popular posts from this blog

javascript - jQuery: Add class depending on URL in the best way -

caching - How to check if a url path exists in the service worker cache -

Redirect to a HTTPS version using .htaccess -