Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

width/height css set hook causes forced reflows #3991

Closed
jbedard opened this Issue Feb 28, 2018 · 0 comments

Comments

Projects
None yet
3 participants
@jbedard
Copy link
Contributor

commented Feb 28, 2018

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

@mgol mgol added the Needs review label Mar 1, 2018

jbedard added a commit to jbedard/jquery that referenced this issue Mar 14, 2018

Dimensions: avoid fetching boxSizing when setting width/height
- this avoids forcing a reflow in some cases

Fixes jquery#3991

jbedard added a commit to jbedard/jquery that referenced this issue Mar 18, 2018

Dimensions: avoid fetching boxSizing when setting width/height
- this avoids forcing a reflow in some cases

Fixes jquery#3991

@timmywil timmywil removed the Needs review label Mar 19, 2018

jbedard added a commit that referenced this issue Mar 25, 2018

Dimensions: avoid fetching boxSizing when setting width/height
- this avoids forcing a reflow in some cases

Fixes #3991

@GulajavaMinistudio GulajavaMinistudio referenced this issue Mar 25, 2018

Merged

Update upstream #44

0 of 4 tasks complete

@lock lock bot locked as resolved and limited conversation to collaborators Sep 21, 2018

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
You can’t perform that action at this time.