CSS: Correctly set support properties with non-default zoom

Fixes gh-3808 Closes gh-3872
jquery · Dec 6, 2017 · f00a07590e67777f4e6b8f452059b116d922a623 · f00a075 · patrickabkarian · Dec 6, 2017
1 parent 0aa832a
commit f00a07590e67777f4e6b8f452059b116d922a623
Unified Split

Showing with 42 additions and 3 deletions.

+7 −3 src/css/support.js

+26 −0 test/data/css/cssWidthBrowserZoom.html

+9 −0 test/unit/css.js
diff --git a/src/css/support.js b/src/css/support.js
@@ -30,16 +30,16 @@ define( [
 		pixelPositionVal = divStyle.top !== "1%";
 
 		// Support: Android 4.0 - 4.3 only, Firefox <=3 - 44
-		reliableMarginLeftVal = divStyle.marginLeft === "12px";
+		reliableMarginLeftVal = roundPixelMeasures( divStyle.marginLeft ) === 12;
 
 		// Support: Android 4.0 - 4.3 only, Safari <=9.1 - 10.1, iOS <=7.0 - 9.3
 		// Some styles come back with percentage values, even though they shouldn't
 		div.style.right = "60%";
-		pixelBoxStylesVal = divStyle.right === "36px";
+		pixelBoxStylesVal = roundPixelMeasures( divStyle.right ) === 36;
 
 		// Support: IE 9 - 11 only
 		// Detect misreporting of content dimensions for box-sizing:border-box elements
-		boxSizingReliableVal = divStyle.width === "36px";
+		boxSizingReliableVal = roundPixelMeasures( divStyle.width ) === 36;
 
 		// Support: IE 9 only
 		// Detect overflow:scroll screwiness (gh-3699)
@@ -53,6 +53,10 @@ define( [
 		div = null;
 	}
 
+	function roundPixelMeasures( measure ) {
+		return Math.round( parseFloat( measure ) );
+	}
+
 	var pixelPositionVal, boxSizingReliableVal, scrollboxSizeVal, pixelBoxStylesVal,
 		reliableMarginLeftVal,
 		container = document.createElement( "div" ),

diff --git a/test/data/css/cssWidthBrowserZoom.html b/test/data/css/cssWidthBrowserZoom.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<style>
+		html {
+			zoom: 1.1;
+		}
+		#test {
+			width: 100px;
+			height: 100px;
+			padding: 10px;
+			border: 1px solid pink;
+			box-sizing: border-box;
+		}
+	</style>
+</head>
+<body>
+<div id="test"></div>
+<script src="../../jquery.js"></script>
+<script src="../iframeTest.js"></script>
+<script>
+	startIframeTest( jQuery( "#test" ).css( 'width' ) );
+</script>
+</body>
+</html>
diff --git a/test/unit/css.js b/test/unit/css.js
@@ -1164,6 +1164,15 @@ 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() {
 	var supportsFractionalGBCR,
 		qunitFixture = document.getElementById( "qunit-fixture" ),