Skip to content

width/height css set hook causes forced reflows #3991

@jbedard

Description

@jbedard

Description

3fcddd6#diff-414c8f59bff0d1b63680b64763d8c529R370 started invoking the isBorderBox test 100% of the time instead of only when necessary. In my case this causes a series of .css({width}) calls to cause a "forced reflow" (that's the chrome terminology in the performance tool).

Updating the width/height set to avoid computing isBorderBox unless necessary fixes it for me locally, but makes the code a bit uglier:

6582c6582
< 				isBorderBox = jQuery.css( elem, "boxSizing", false, styles ) === "border-box",
---
> 				isBorderBox,
6587c6587
< 					isBorderBox,
---
> 					isBorderBox = jQuery.css( elem, "boxSizing", false, styles ) === "border-box",
6593c6593
< 			if ( isBorderBox && support.scrollboxSize() === styles.position ) {
---
> 			if ( support.scrollboxSize() === styles.position && (undefined === isBorderBox ? (isBorderBox = jQuery.css( elem, "boxSizing", false, styles ) === "border-box") : isBorderBox) ) {

However so far I have been unable to reproduce this in jsbin, so there must be another condition that I'm not understanding such as a specific position type on the element or parent element?

Here's an example where a series of ng-style="{width: X}" in AngularJS causes this (and jQuery 3.1 does not cause it):
jq33-reflow

Link to test case

TODO

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions