Fix #11542. document.body should not be special in .offset() and docu…

…ment.documentElement is the default element.offsetParent. Close gh-899.
jquery · Oct 25, 2012 · b398a68 · b398a68
1 parent 69e2f06
commit b398a68
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 36 deletions.
diff --git a/src/offset.js b/src/offset.js
@@ -1,5 +1,3 @@
-var rroot = /^(?:body|html)$/i;
-
 jQuery.fn.offset = function( options ) {
 	if ( arguments.length ) {
 		return options === undefined ?
@@ -9,7 +7,7 @@ jQuery.fn.offset = function( options ) {
 			});
 	}
 
-	var docElem, body, win, clientTop, clientLeft, scrollTop, scrollLeft,
+	var docElem, win,
 		box = { top: 0, left: 0 },
 		elem = this[ 0 ],
 		doc = elem && elem.ownerDocument;
@@ -18,10 +16,6 @@ jQuery.fn.offset = function( options ) {
 		return;
 	}
 
-	if ( (body = doc.body) === elem ) {
-		return jQuery.offset.bodyOffset( elem );
-	}
-
 	docElem = doc.documentElement;
 
 	// Make sure it's not a disconnected DOM node
@@ -35,30 +29,14 @@ jQuery.fn.offset = function( options ) {
 		box = elem.getBoundingClientRect();
 	}
 	win = getWindow( doc );
-	clientTop  = docElem.clientTop  || body.clientTop  || 0;
-	clientLeft = docElem.clientLeft || body.clientLeft || 0;
-	scrollTop  = win.pageYOffset || docElem.scrollTop;
-	scrollLeft = win.pageXOffset || docElem.scrollLeft;
 	return {
-		top: box.top  + scrollTop  - clientTop,
-		left: box.left + scrollLeft - clientLeft
+		top: box.top  + ( win.pageYOffset || docElem.scrollTop )  - ( docElem.clientTop  || 0 ),
+		left: box.left + ( win.pageXOffset || docElem.scrollLeft ) - ( docElem.clientLeft || 0 )
 	};
 };
 
 jQuery.offset = {
 
-	bodyOffset: function( body ) {
-		var top = body.offsetTop,
-			left = body.offsetLeft;
-
-		if ( jQuery.support.doesNotIncludeMarginInBodyOffset ) {
-			top  += parseFloat( jQuery.css(body, "marginTop") ) || 0;
-			left += parseFloat( jQuery.css(body, "marginLeft") ) || 0;
-		}
-
-		return { top: top, left: left };
-	},
-
 	setOffset: function( elem, options, i ) {
 		var position = jQuery.css( elem, "position" );
 
@@ -125,7 +103,7 @@ jQuery.fn.extend({
 
 			// Get correct offsets
 			offset = this.offset();
-			if ( !rroot.test( offsetParent[ 0 ].nodeName ) ) {
+			if ( !jQuery.nodeName( offsetParent[ 0 ], "html" ) ) {
 				parentOffset = offsetParent.offset();
 			}
 
@@ -145,11 +123,11 @@ jQuery.fn.extend({
 
 	offsetParent: function() {
 		return this.map(function() {
-			var offsetParent = this.offsetParent || document.body;
-			while ( offsetParent && (!rroot.test(offsetParent.nodeName) && jQuery.css(offsetParent, "position") === "static") ) {
+			var offsetParent = this.offsetParent || document.documentElement;
+			while ( offsetParent && ( !jQuery.nodeName( offsetParent, "html" ) && jQuery.css( offsetParent, "position") === "static" ) ) {
 				offsetParent = offsetParent.offsetParent;
 			}
-			return offsetParent || document.body;
+			return offsetParent || document.documentElement;
 		});
 	}
 });

diff --git a/test/data/offset/body.html b/test/data/offset/body.html
@@ -5,8 +5,9 @@
 		<meta http-equiv="Content-type" content="text/html; charset=utf-8">
 		<title>body</title>
 		<style type="text/css" media="screen">
-			body { margin: 1px; padding: 5px; }
+			body { margin: 1px; padding: 5px; position: relative }
 			#marker { position: absolute; border: 2px solid #000; width: 50px; height: 50px; background: #ccc; }
+			#firstElement { width: 50px; height: 50px; background: green; }
 		</style>
 		<script src="../../../dist/jquery.js"></script>
 		<script type="text/javascript" charset="utf-8">
@@ -19,6 +20,7 @@
 		</script>
 	</head>
 	<body>
+		<div id="firstElement"></div>
 		<div id="marker"></div>
 	</body>
 </html>
diff --git a/test/unit/offset.js b/test/unit/offset.js
@@ -452,10 +452,12 @@ testIframe("offset/scroll", "scroll", function( $, win ) {
 });
 
 testIframe("offset/body", "body", function( $ ) {
-	expect(2);
+	expect(4);
 
 	equal( $("body").offset().top, 1, "jQuery('#body').offset().top" );
 	equal( $("body").offset().left, 1, "jQuery('#body').offset().left" );
+	equal( $("#firstElement").position().left, 5, "$('#firstElement').position().left" );
+	equal( $("#firstElement").position().top, 5, "$('#firstElement').position().top" );
 });
 
 test("chaining", function() {
@@ -471,15 +473,15 @@ test("offsetParent", function(){
 
 	var body = jQuery("body").offsetParent();
 	equal( body.length, 1, "Only one offsetParent found." );
-	equal( body[0], document.body, "The body is its own offsetParent." );
+	equal( body[0], document.documentElement, "The html element is the offsetParent of the body." );
 
 	var header = jQuery("#qunit-header").offsetParent();
 	equal( header.length, 1, "Only one offsetParent found." );
-	equal( header[0], document.body, "The body is the offsetParent." );
+	equal( header[0], document.documentElement, "The html element is the offsetParent of the body." );
 
 	var div = jQuery("#nothiddendivchild").offsetParent();
 	equal( div.length, 1, "Only one offsetParent found." );
-	equal( div[0], document.body, "The body is the offsetParent." );
+	equal( div[0], document.documentElement, "The html element is the offsetParent of the body." );
 
 	jQuery("#nothiddendiv").css("position", "relative");
 
@@ -489,11 +491,11 @@ test("offsetParent", function(){
 
 	div = jQuery("body, #nothiddendivchild").offsetParent();
 	equal( div.length, 2, "Two offsetParent found." );
-	equal( div[0], document.body, "The body is the offsetParent." );
+	equal( div[0], document.documentElement, "The html element is the offsetParent of the body." );
 	equal( div[1], jQuery("#nothiddendiv")[0], "The div is the offsetParent." );
 
 	var area = jQuery("#imgmap area").offsetParent();
-	equal( area[0], document.body, "The body is the offsetParent." );
+	equal( area[0], document.documentElement, "The html element is the offsetParent of the body." );
 });
 
 test("fractions (see #7730 and #7885)", function() {