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
Closed

width/height css set hook causes forced reflows #3991

jbedard opened this issue Feb 28, 2018 · 0 comments

Comments

@jbedard
Copy link
Contributor

@jbedard jbedard 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

jbedard added a commit to jbedard/jquery that referenced this issue Mar 14, 2018
- 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
- this avoids forcing a reflow in some cases

Fixes jquery#3991
jbedard added a commit that referenced this issue Mar 25, 2018
- this avoids forcing a reflow in some cases

Fixes #3991
@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.
Labels
None yet
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

3 participants