CSS: Correctly detect scrollbox support with non-default zoom

gibson042 · web-flow · commit 821bf34353a6 · 2018-05-07T09:28:18.000-04:00
Fixes gh-4029 Closes gh-4030
diff --git 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
@@ -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
@@ -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
@@ -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" );
 	}
 );
 
