0

I've noticed some weird behavior of jQuery's filter(":visible) when applied on an element with overflow auto which is later reset to hidden (in Chrome).

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

The intention of this code is to take the element (the overflow of which was previously, by some other code, set to hidden), find a certain child and stretch it, to the full available height of the parent.

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

Any idea why that is happening? (Chrome version 48.0.2564.97 m) And does this happen in other Chrome versions too? Any elegant solution to prevent this bad behavior other than making sure that the overflow is set as requested before the filter is applied?

Source code:

$(".container").css({
 overflow: "auto"
});

// comment this line (which does nothing and see the what the width of the header does in chrome)
// it should do basically nothing - it is not assigned to any variable, nor is any action called
// - yet it makes the header shrink by the scrollbar width...
$(".container").filter(":visible");

// set overflow to 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>
Malis
  • 220
  • 2
  • 15
  • See also: http://stackoverflow.com/questions/8337186/jquery-isvisible-not-working-in-chrome – MTCoster Feb 08 '16 at 16:44
  • 1
    note, just using the selector at all reproduces the problem. https://jsfiddle.net/80wxkhbo/5/ – Kevin B Feb 08 '16 at 16:48
  • 1
    Safari 9.1 the same behavior – stdob-- Feb 08 '16 at 16:50
  • 1
    Here's the source for what that selector does: https://github.com/jquery/jquery/blob/master/src/css/hiddenVisibleSelectors.js#L10 Looks like a chrome bug to me, can reproduce without jQuery. https://jsfiddle.net/80wxkhbo/6/ getting the offsetWidth seems to be causing the layout change. – Kevin B Feb 08 '16 at 16:53
  • 1
    Please post your code here, not just as a fiddle link. – Barmar Feb 08 '16 at 17:01
  • @MTCoster that's a different problem (not about whether true or false should be returned) – Malis Feb 08 '16 at 17:05
  • @KevinB Thanks. It doesn't look like much can be done about it other than keeping it in mind and making sure that the overflow is reset _before_ the filter is applied. The Chrome/Safari behavior is weird but that seems to be pretty much all we can do about it :) – Malis Feb 08 '16 at 17:09
  • @stdob Good to know that it's a multi-browser issue :) – Malis Feb 08 '16 at 17:10
  • @Barmar OK, question updated... – Malis Feb 08 '16 at 17:15

0 Answers0