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