CSS: Correctly detect scrollbox support with non-default zoom

Fixes gh-4029
Closes gh-4030

diff --git a/src/css.js b/src/css.js
index ea730201219c0dfa20cedf7535657f48da81d0f2..e936c8f30ec7655371b5b9e9f79fc31a3e01e91a 100644 (file)
--- a/src/css.js
+++ b/src/css.js
@@ -352,13 +352,15 @@ jQuery.each( [ "height", "width" ], function( i, dimension ) {
                                boxSizingNeeded = scrollBoxSize || extra,
                                isBorderBox = boxSizingNeeded &&
                                        jQuery.css( elem, "boxSizing", false, styles ) === "border-box",
-                               subtract = extra && boxModelAdjustment(
-                                       elem,
-                                       dimension,
-                                       extra,
-                                       isBorderBox,
-                                       styles
-                               );
+                               subtract = extra ?
+                                       boxModelAdjustment(
+                                               elem,
+                                               dimension,
+                                               extra,
+                                               isBorderBox,
+                                               styles
+                                       ) :
+                                       0;
 
                        // Account for unreliable border-box dimensions by comparing offset* to computed and
                        // faking a content-box to get border and padding (gh-3699)

diff --git a/src/css/support.js b/src/css/support.js
index dbb7ef7ce173e3fe17419229b59c386930655a5b..12706f7e9a5625c37dced6529f81882163e47bfe 100644 (file)
--- a/src/css/support.js
+++ b/src/css/support.js
@@ -43,8 +43,10 @@ define( [
 
                // Support: IE 9 only
                // Detect overflow:scroll screwiness (gh-3699)
+               // Support: Chrome <=64
+               // Don't get tricked when zoom affects offsetWidth (gh-4029)
                div.style.position = "absolute";
-               scrollboxSizeVal = div.offsetWidth === 36 || "absolute";
+               scrollboxSizeVal = roundPixelMeasures( div.offsetWidth / 3 ) === 12 || "absolute";
 
                documentElement.removeChild( container );
 

diff --git a/test/data/css/cssWidthBrowserZoom.html b/test/data/css/cssWidthBrowserZoom.html
index 99f87ea292abf07b68b879e86a11f3a662577ec0..133daf6220aaa863b483059ba68a60f8a8e23ab6 100644 (file)
--- a/test/data/css/cssWidthBrowserZoom.html
+++ b/test/data/css/cssWidthBrowserZoom.html
@@ -7,6 +7,7 @@
                        zoom: 1.1;
                }
                #test {
+                       position: absolute;
                        width: 100px;
                        height: 100px;
                        padding: 10px;
@@ -20,7 +21,10 @@
 <script src="../../jquery.js"></script>
 <script src="../iframeTest.js"></script>
 <script>
-       startIframeTest( jQuery( "#test" ).css( 'width' ) );
+       startIframeTest(
+               jQuery( "#test" ).css( 'width' ),
+               jQuery( "#test" ).css( 'width', '100px' ).css( 'width' )
+       );
 </script>
 </body>
 </html>

diff --git a/test/unit/css.js b/test/unit/css.js
index fbb42c301173c527864381f3427acdaeaf04907e..626981b7d8c05f3b5ee78f3aff3eb8f029108ff0 100644 (file)
--- a/test/unit/css.js
+++ b/test/unit/css.js
@@ -1167,9 +1167,10 @@ testIframe(
 testIframe(
        "css('width') should work correctly with browser zooming",
        "css/cssWidthBrowserZoom.html",
-       function( assert, jQuery, window, document, cssWidthBrowserZoom ) {
-               assert.expect( 1 );
-               assert.strictEqual( cssWidthBrowserZoom, "100px", "elem.css('width') works correctly with browser zoom" );
+       function( assert, jQuery, window, document, widthBeforeSet, widthAfterSet ) {
+               assert.expect( 2 );
+               assert.strictEqual( widthBeforeSet, "100px", "elem.css('width') works correctly with browser zoom" );
+               assert.strictEqual( widthAfterSet, "100px", "elem.css('width', val) works correctly with browser zoom" );
        }
 );