Dimensions: ignore transforms when retrieving width/height

Close gh-3561
Fixes gh-3193

2 files changed, 27 insertions, 30 deletions

diff --git a/src/css.js b/src/css.js
index 7a225d9a9..3c5784aa2 100644
--- a/src/css.js
+++ b/src/css.js
@@ -128,43 +128,29 @@ function augmentWidthOrHeight( elem, name, extra, isBorderBox, styles ) {
 
 function getWidthOrHeight( elem, name, extra ) {
 
-	// Start with offset property, which is equivalent to the border-box value
-	var val,
-		valueIsBorderBox = true,
+	// Start with computed style
+	var valueIsBorderBox,
 		styles = getStyles( elem ),
+		val = curCSS( elem, name, styles ),
 		isBorderBox = jQuery.css( elem, "boxSizing", false, styles ) === "border-box";
 
-	// Support: IE <=11 only
-	// Running getBoundingClientRect on a disconnected node
-	// in IE throws an error.
-	if ( elem.getClientRects().length ) {
-		val = elem.getBoundingClientRect()[ name ];
+	// Fall back to uncomputed css if necessary
+	if ( val < 0 || val == null ) {
+		val = elem.style[ name ];
 	}
 
-	// Some non-html elements return undefined for offsetWidth, so check for null/undefined
-	// svg - https://bugzilla.mozilla.org/show_bug.cgi?id=649285
-	// MathML - https://bugzilla.mozilla.org/show_bug.cgi?id=491668
-	if ( val <= 0 || val == null ) {
-
-		// Fall back to computed then uncomputed css if necessary
-		val = curCSS( elem, name, styles );
-		if ( val < 0 || val == null ) {
-			val = elem.style[ name ];
-		}
-
-		// Computed unit is not pixels. Stop here and return.
-		if ( rnumnonpx.test( val ) ) {
-			return val;
-		}
+	// Computed unit is not pixels. Stop here and return.
+	if ( rnumnonpx.test( val ) ) {
+		return val;
+	}
 
-		// Check for style in case a browser which returns unreliable values
-		// for getComputedStyle silently falls back to the reliable elem.style
-		valueIsBorderBox = isBorderBox &&
-			( support.boxSizingReliable() || val === elem.style[ name ] );
+	// Check for style in case a browser which returns unreliable values
+	// for getComputedStyle silently falls back to the reliable elem.style
+	valueIsBorderBox = isBorderBox &&
+		( support.boxSizingReliable() || val === elem.style[ name ] );
 
-		// Normalize "", auto, and prepare for extra
-		val = parseFloat( val ) || 0;
-	}
+	// Normalize "", auto, and prepare for extra
+	val = parseFloat( val ) || 0;
 
 	// Use the active box-sizing model to add/subtract irrelevant styles
 	return ( val +
diff --git a/test/unit/dimensions.js b/test/unit/dimensions.js
index 5741b2af7..1bf4ae2aa 100644
--- a/test/unit/dimensions.js
+++ b/test/unit/dimensions.js
@@ -527,4 +527,15 @@ QUnit.test( "outside view position (gh-2836)", function( assert ) {
 	parent.scrollTop( 400 );
 } );
 
+QUnit.test( "width/height on element with transform (gh-3193)", function( assert ) {
+
+	assert.expect( 2 );
+
+	var $elem = jQuery( "<div style='width: 200px; height: 200px; transform: scale(2);' />" )
+		.appendTo( "#qunit-fixture" );
+
+	assert.equal( $elem.width(), 200, "Width ignores transforms" );
+	assert.equal( $elem.height(), 200, "Height ignores transforms" );
+} );
+
 } )();