Fix #9505, percentage position values in Webkit, closes gh-825.

src/css.js

@@ -135,8 +135,6 @@ jQuery.extend({
 					var ret = curCSS( elem, "opacity" );
 					return ret === "" ? "1" : ret;
 
-				} else {
-					return elem.style.opacity;
 				}
 			}
 		}
@@ -288,17 +286,17 @@ if ( document.defaultView && document.defaultView.getComputedStyle ) {
 			if ( ret === "" && !jQuery.contains( elem.ownerDocument.documentElement, elem ) ) {
 				ret = jQuery.style( elem, name );
 			}
-		}
 
 			// A tribute to the "awesome hack by Dean Edwards"
 			// WebKit uses "computed value (percentage if specified)" instead of "used value" for margins
 			// which is against the CSSOM draft spec: http://dev.w3.org/csswg/cssom/#resolved-values
-		if ( !jQuery.support.pixelMargin && computedStyle && rmargin.test( name ) && rnumnonpx.test( ret ) ) {
+			if ( !jQuery.support.pixelMargin && rmargin.test( name ) && rnumnonpx.test( ret ) ) {
 				width = style.width;
 				style.width = ret;
 				ret = computedStyle.width;
 				style.width = width;
 			}
+		}
 
 		return ret;
 	};
@@ -544,9 +542,9 @@ if ( !jQuery.support.opacity ) {
 	};
 }
 
+// These hooks cannot be added until DOM ready because the support test
+// for it is not run until after DOM ready
 jQuery(function() {
-	// This hook cannot be added until DOM ready because the support test
-	// for it is not run until after DOM ready
 	if ( !jQuery.support.reliableMarginRight ) {
 		jQuery.cssHooks.marginRight = {
 			get: function( elem, computed ) {
@@ -562,6 +560,24 @@ jQuery(function() {
 			}
 		};
 	}
+
+	// Webkit bug: https://bugs.webkit.org/show_bug.cgi?id=29084
+	// getComputedStyle returns percent when specified for top/left/bottom/right
+	// rather than make the css module depend on the offset module, we just check for it here
+	if ( !jQuery.support.pixelPosition && jQuery.fn.position ) {
+		jQuery.each( [ "top", "left" ], function( i, prop ) {
+			jQuery.cssHooks[ prop ] = {
+				get: function( elem, computed ) {
+					if ( computed ) {
+						var ret = curCSS( elem, prop );
+						// if curCSS returns percentage, fallback to offset
+						return rnumnonpx.test( ret ) ? jQuery( elem ).position()[ prop ] + "px" : ret;
+					}
+				}
+			};
+		});
+	}
+
 });
 
 if ( jQuery.expr && jQuery.expr.filters ) {

src/effects.js

@@ -21,7 +21,7 @@ var fxNow, timerId,
 					// Iteratively approximate from a nonzero starting point
 					// Prefer the current property, because this process will be trivial if it uses the same units
 					// Fallback to end or a simple constant
-					start = parseFloat( jQuery.style( tween.elem, prop ) ) || end || 1;
+					start = parseFloat( jQuery.css( tween.elem, prop ) ) || end || 1;
 
 					do {
 						// If previous iteration zeroed out, double until we get *something*

src/support.js

@@ -90,7 +90,8 @@ jQuery.support = (function() {
 		shrinkWrapBlocks: false,
 		reliableMarginRight: true,
 		pixelMargin: true,
-		boxSizingReliable: true
+		boxSizingReliable: true,
+		pixelPosition: false
 	};
 
 	// Make sure checked status is properly cloned
@@ -206,11 +207,12 @@ jQuery.support = (function() {
 
 		// Check box-sizing and margin behavior
 		div.innerHTML = "";
-		div.style.cssText = "box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;padding:1px;border:1px;display:block;width:4px;margin-top:1%;";
+		div.style.cssText = "box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;padding:1px;border:1px;display:block;width:4px;margin-top:1%;position:absolute;top:1%;";
 		support.boxSizing = ( div.offsetWidth === 4 );
 		support.doesNotIncludeMarginInBodyOffset = ( body.offsetTop !== 1 );
 		if ( window.getComputedStyle ) {
 			support.pixelMargin = ( window.getComputedStyle( div, null ) || {} ).marginTop !== "1%";
+			support.pixelPosition = ( window.getComputedStyle( div, null ) || {} ).top !== "1%";
 			support.boxSizingReliable = ( window.getComputedStyle( div, null ) || { width: "4px" } ).width === "4px";
 
 			// Check if div with explicit width and no margin-right incorrectly

test/unit/css.js

@@ -713,12 +713,23 @@ test("can't get background-position in IE<9, see #10796", function() {
 	}
 });
 
-test("percentage position properties in IE<9 should not be incorrectly transformed to pixels, see #11311", function() {
+test("percentage properties for bottom and right in IE<9 should not be incorrectly transformed to pixels, see #11311", function() {
 	expect( 1 );
 	var div = jQuery("<div style='position: absolute; width: 1px; height: 20px; bottom:50%;'></div>").appendTo( "#qunit-fixture" );
 	ok( window.getComputedStyle || div.css( "bottom" ) === "50%", "position properties get incorrectly transformed in IE<8, see #11311" );
 });
 
+if ( jQuery.fn.offset ) {
+	test("percentage properties for left and top should be transformed to pixels, see #9505", function() {
+		expect( 2 );
+		var parent = jQuery("<div style='position:relative;width:200px;height:200px;margin:0;padding:0;border-width:0'></div>").appendTo( "#qunit-fixture" ),
+			div = jQuery("<div style='position: absolute; width: 20px; height: 20px; top:50%; left:50%'></div>").appendTo( parent );
+
+		equal( div.css("top"), "100px", "position properties not transformed to pixels, see #9505" );
+		equal( div.css("left"), "100px", "position properties not transformed to pixels, see #9505" );
+	});
+}
+
 test("Do not append px to 'fill-opacity' #9548", 1, function() {
 	var $div = jQuery("<div>").appendTo("#qunit-fixture").css("fill-opacity", 1);
 	equal( $div.css("fill-opacity"), 1, "Do not append px to 'fill-opacity'");