library-mirrors/jquery
1
0
Fork 0
mirror of https://github.com/jquery/jquery.git synced 2024-11-23 02:54:22 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

CSS: Avoid forcing a reflow in width/height getters unless necessary

Browse Source 
Fixes gh-4322
Closes gh-4325
Ref gh-3991
Ref gh-4010
Ref gh-4185
Ref gh-4187
This commit is contained in:
Michał Gołębiowski-Owczarek 2019-03-18 18:44:43 +01:00 committed by GitHub
parent 0ec25abba2
commit a0abd15b9e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 20 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/css.js
View File

@ -118,9 +118,15 @@ function getWidthOrHeight( elem, dimension, extra ) {
// Start with computed style // Start with computed style
var styles = getStyles( elem ), var styles = getStyles( elem ),
val = curCSS( elem, dimension, styles ),
isBorderBox = jQuery.css( elem, "boxSizing", false, styles ) === "border-box", // To avoid forcing a reflow, only fetch boxSizing if we need it (gh-4322).
// Fake content-box until we know it's needed to know the true value.
boxSizingNeeded = !support.boxSizingReliable() || extra,
isBorderBox = boxSizingNeeded &&
jQuery.css( elem, "boxSizing", false, styles ) === "border-box",
valueIsBorderBox = isBorderBox, valueIsBorderBox = isBorderBox,
val = curCSS( elem, dimension, styles ),
offsetProp = "offset" + dimension[ 0 ].toUpperCase() + dimension.slice( 1 ); offsetProp = "offset" + dimension[ 0 ].toUpperCase() + dimension.slice( 1 );
// Support: Firefox <=54 // Support: Firefox <=54
@ -141,10 +147,13 @@ function getWidthOrHeight( elem, dimension, extra ) {
// Also use offsetWidth/offsetHeight for when box sizing is unreliable // Also use offsetWidth/offsetHeight for when box sizing is unreliable
// We use getClientRects() to check for hidden/disconnected. // We use getClientRects() to check for hidden/disconnected.
// In those cases, the computed value can be trusted to be border-box // In those cases, the computed value can be trusted to be border-box
if ( ( isBorderBox && !support.boxSizingReliable() || val === "auto" || if ( ( !support.boxSizingReliable() && isBorderBox ||
val === "auto" ||
!parseFloat( val ) && jQuery.css( elem, "display", false, styles ) === "inline" ) && !parseFloat( val ) && jQuery.css( elem, "display", false, styles ) === "inline" ) &&
elem.getClientRects().length ) { elem.getClientRects().length ) {
isBorderBox = jQuery.css( elem, "boxSizing", false, styles ) === "border-box";
// Where available, offsetWidth/offsetHeight approximate border box dimensions. // Where available, offsetWidth/offsetHeight approximate border box dimensions.
// Where not available (e.g., SVG), assume unreliable box-sizing and interpret the // Where not available (e.g., SVG), assume unreliable box-sizing and interpret the
// retrieved value as a content box dimension. // retrieved value as a content box dimension.

16
test/unit/dimensions.js
View File

@ -397,17 +397,17 @@ QUnit.test( "SVG dimensions (border-box)", function( assert ) {
var svg = jQuery( "<svg style='width: 100px; height: 100px; box-sizing: border-box; border: 1px solid white; padding: 2px; margin: 3px'></svg>" ).appendTo( "#qunit-fixture" ); var svg = jQuery( "<svg style='width: 100px; height: 100px; box-sizing: border-box; border: 1px solid white; padding: 2px; margin: 3px'></svg>" ).appendTo( "#qunit-fixture" );
assert.equal( svg.width(), 94 ); assert.equal( svg.width(), 94, "width" );
assert.equal( svg.height(), 94 ); assert.equal( svg.height(), 94, "height" );
assert.equal( svg.innerWidth(), 98 ); assert.equal( svg.innerWidth(), 98, "innerWidth" );
assert.equal( svg.innerHeight(), 98 ); assert.equal( svg.innerHeight(), 98, "innerHeight" );
assert.equal( svg.outerWidth(), 100 ); assert.equal( svg.outerWidth(), 100, "outerWidth" );
assert.equal( svg.outerHeight(), 100 ); assert.equal( svg.outerHeight(), 100, "outerHeight" );
assert.equal( svg.outerWidth( true ), 106 ); assert.equal( svg.outerWidth( true ), 106, "outerWidth( true )" );
assert.equal( svg.outerHeight( true ), 106 ); assert.equal( svg.outerHeight( true ), 106, "outerHeight( true )" );
svg.remove(); svg.remove();
} ); } );