Bad performance with Chrome and sibling selector

[cguglielmo]

Hi there

We experienced a weird performance issue with jQuery 3.3.1 which does not occur with jQuery 2.2.4. As far as we can tell, only Chrome is affected.

The problem is, that the following code forces the browser to recalculate its style.
$elem.css('width', 'auto'); $elem.css('display', 'inline-block');

If this is done in a loop let's say for 1000 elements, the browser will recalculate the style a 1000 times! But, it only seems to happen if there is a CSS rule using a sibling selector for the container element of the 1000 nodes. The CSS rule can even be empty, but the rule has to be in a separate style sheet. If the style is embedded in the HTML document, it works fine...

We could track it down to the following line:
isBorderBox = jQuery.css( elem, "boxSizing", false, styles ) === "border-box",

Replacing the above line with the following line fixes the problem:
isBorderBox = extra && jQuery.css( elem, "boxSizing", false, styles ) === "border-box",

Reading the box-sizing attribute obviously forces the browser to recalculate the style. But honestly, we don't know what this patch could break. It looks like the code is only necessary for IE 9? At least according to issue #3699.

An example to reproduce the issue is attached.
jQuery Perf.zip

[mgol]

Thanks for the report! We fixed a similar issue in #4187 but we missed this one.

We will most likely not be able to avoid layout thrashing in IE but we might be able to do that in other browsers.

@cguglielmo You can check whether your change breaks something by running npm test in the repository.

[mgol]

PR: #4325

[mgol]

@cguglielmo This has been fixed. You can double-check with our dev version, https://code.jquery.com/jquery-git.js (just don't use it in production!). I checked your test case & it no longer does layout thrashing.