Dimensions: ignore transforms when retrieving width/height

Close gh-3561
Fixes gh-3193

diff --git a/src/css.js b/src/css.js
index 7a225d9a9ac69613407a3ed2f4832ecd97f4a84d..3c5784aa29bbb213f3cb961bd00443c9446ca161 100644 (file)
--- 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 5741b2af7a0b0885c95acf0bd493c4e320903490..1bf4ae2aa04b0f82b292c4cda995a793040bc493 100644 (file)
--- 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" );
+} );
+
 } )();