jQuery.css with empty value disables transition from 3.3.0

[itchyny]

Description

Setting some specific properties to empty value with jQuery.css once and setting a new style disables the animation (CSS transition). See the following examples.

• jQuery 3.2.1: https://jsfiddle.net/y34h7aef/
  • The div animates.
• jQuery 3.3.1: https://jsfiddle.net/j5ranug1/
  • The div doesn't animate.

This looks like a breaking change introduced in 3.3.0. I believe this is an unexpected behavior. It animates when I use jQuery 2 (https://jsfiddle.net/L1u7o8zv/).

Link to test case

https://jsfiddle.net/j5ranug1/

[mgol]

Thanks for the report.

This is caused by 3fcddd6 (cc @gibson042) and is a result of the width setter now reading the box-sizing style which requires the browser to recompute the styles. If that wasn't done then the browser would simply ignore the first few .css calls that reset the properties since they are set to different values shortly after.

Note that this problem already exists in jQuery 2, although in a more limited way. The box-sizing check was always done, just usually only for outerWidth & similar APIs; see an example with jQuery 2.2.4: https://jsfiddle.net/y34h7aef/3/

This issue has a larger impact when it affects bare .css('width', ...) setter, though. I think we may have to hide the border-box check again in an extra check. We've got another usage of it below (see the mentioned 3fcddd6 commit) but we could first check for scrollBoxSize (currently named that way, was borderBoxReliable in the commit) and only then query box-sizing.

Even if not for this issue, IMO we should do it for performance reasons. As it stands, just calling the .css('width', ...) setter repeatedly will cause layout thrashing.

[mgol]

Hmm, boxSizing is queried only when needed, though - if either the scrollboxSize support test fails or when we need to adjust for margins etc. so there should be no layout thrashing...

I verified 3fcddd6 is the commit causing this issue, though. Investigating further...

[mgol]

OK, the issue is the comparison to styles.position. So we do have layout thrashing in the end, it seems...

[mgol]

I have a PR: #4187.

Setting milestone to 3.4.0.