From 1d2df772b4d6e5dbf91df6e75f4a1809f7879ab0 Mon Sep 17 00:00:00 2001 From: Richard Gibson Date: Mon, 24 Apr 2017 12:15:39 -0400 Subject: [PATCH] Offset: Use correct offset parents; include all border/scroll values Thanks @anseki Fixes gh-3080 Fixes gh-3107 Closes gh-3096 Closes gh-3487 --- src/offset.js | 57 +++++----- test/data/offset/boxes.html | 99 +++++++++++++++++ test/unit/offset.js | 211 +++++++++++++++++++++++++++++++++++- 3 files changed, 340 insertions(+), 27 deletions(-) create mode 100644 test/data/offset/boxes.html diff --git a/src/offset.js b/src/offset.js index c1ab85787..563c6e8cd 100644 --- a/src/offset.js +++ b/src/offset.js @@ -7,13 +7,12 @@ define( [ "./css/curCSS", "./css/addGetHookIf", "./css/support", - "./core/nodeName", "./core/init", "./css", "./selector" // contains ], function( jQuery, access, document, documentElement, rnumnonpx, - curCSS, addGetHookIf, support, nodeName ) { + curCSS, addGetHookIf, support ) { "use strict"; @@ -70,6 +69,8 @@ jQuery.offset = { }; jQuery.fn.extend( { + + // offset() relates an element's border box to the document origin offset: function( options ) { // Preserve chaining for setter @@ -81,7 +82,7 @@ jQuery.fn.extend( { } ); } - var doc, docElem, rect, win, + var rect, win, elem = this[ 0 ]; if ( !elem ) { @@ -96,50 +97,54 @@ jQuery.fn.extend( { return { top: 0, left: 0 }; } + // Get document-relative position by adding viewport scroll to viewport-relative gBCR rect = elem.getBoundingClientRect(); - - doc = elem.ownerDocument; - docElem = doc.documentElement; - win = doc.defaultView; - + win = elem.ownerDocument.defaultView; return { - top: rect.top + win.pageYOffset - docElem.clientTop, - left: rect.left + win.pageXOffset - docElem.clientLeft + top: rect.top + win.pageYOffset, + left: rect.left + win.pageXOffset }; }, + // position() relates an element's margin box to its offset parent's padding box + // This corresponds to the behavior of CSS absolute positioning position: function() { if ( !this[ 0 ] ) { return; } - var offsetParent, offset, + var offsetParent, offset, doc, elem = this[ 0 ], parentOffset = { top: 0, left: 0 }; - // Fixed elements are offset from window (parentOffset = {top:0, left: 0}, - // because it is its only offset parent + // position:fixed elements are offset from the viewport, which itself always has zero offset if ( jQuery.css( elem, "position" ) === "fixed" ) { - // Assume getBoundingClientRect is there when computed position is fixed + // Assume position:fixed implies availability of getBoundingClientRect offset = elem.getBoundingClientRect(); } else { + offset = this.offset(); - // Get *real* offsetParent - offsetParent = this.offsetParent(); + // Account for the *real* offset parent, which can be the document or its root element + // when a statically positioned element is identified + doc = elem.ownerDocument; + offsetParent = elem.offsetParent || doc.documentElement; + while ( offsetParent && + ( offsetParent === doc.body || offsetParent === doc.documentElement ) && + jQuery.css( offsetParent, "position" ) === "static" ) { - // Get correct offsets - offset = this.offset(); - if ( !nodeName( offsetParent[ 0 ], "html" ) ) { - parentOffset = offsetParent.offset(); + offsetParent = offsetParent.parentNode; + } + if ( offsetParent && offsetParent !== elem && offsetParent.nodeType === 1 ) { + + // Incorporate borders into its offset, since they are outside its content origin + parentOffset = jQuery( offsetParent ).offset(); + parentOffset = { + top: parentOffset.top + jQuery.css( offsetParent, "borderTopWidth", true ), + left: parentOffset.left + jQuery.css( offsetParent, "borderLeftWidth", true ) + }; } - - // Add offsetParent borders - parentOffset = { - top: parentOffset.top + jQuery.css( offsetParent[ 0 ], "borderTopWidth", true ), - left: parentOffset.left + jQuery.css( offsetParent[ 0 ], "borderLeftWidth", true ) - }; } // Subtract parent offsets and element margins diff --git a/test/data/offset/boxes.html b/test/data/offset/boxes.html new file mode 100644 index 000000000..dbc7a15c0 --- /dev/null +++ b/test/data/offset/boxes.html @@ -0,0 +1,99 @@ + + + + + + Nonempty margin/border/padding/position + + + + + + +
+
relative > relative
+
relative > absolute
+
+
+
absolute > relative
+
absolute > absolute
+
+
+
fixed > relative
+
fixed > absolute
+
+

position:absolute with no top/left values

+ + diff --git a/test/unit/offset.js b/test/unit/offset.js index 5b73ede60..622a7ba90 100644 --- a/test/unit/offset.js +++ b/test/unit/offset.js @@ -503,6 +503,215 @@ QUnit.test( "chaining", function( assert ) { assert.equal( jQuery( "#absolute-1" ).offset( undefined ).jquery, jQuery.fn.jquery, "offset(undefined) returns jQuery object (#5571)" ); } ); +// Test complex content under a variety of / positioning styles +( function() { + var POSITION_VALUES = [ "static", "relative", "absolute", "fixed" ], + + // Use shorthands for describing an element's relevant properties + BOX_PROPS = + ( "top left marginTop marginLeft borderTop borderLeft paddingTop paddingLeft" + + " style parent" ).split( /\s+/g ), + props = function() { + var propObj = {}; + supportjQuery.each( arguments, function( i, value ) { + propObj[ BOX_PROPS[ i ] ] = value; + } ); + return propObj; + }, + + // Values must stay synchronized with test/data/offset/boxes.html + divProps = function( position, parentId ) { + return props( 8, 4, 16, 8, 4, 2, 32, 16, position, parentId ); + }, + htmlProps = function( position ) { + return props( position === "static" ? 0 : 4096, position === "static" ? 0 : 2048, + 64, 32, 128, 64, 256, 128, position ); + }, + bodyProps = function( position ) { + return props( position === "static" ? 0 : 8192, position === "static" ? 0 : 4096, + 512, 256, 1024, 512, 2048, 1024, position, + position !== "fixed" && "documentElement" ); + }, + viewportScroll = { top: 2, left: 1 }, + + alwaysScrollable = false; + + // Support: iOS <=7 + // Detect viewport scrollability for pages with position:fixed document element + ( function() { + var $iframe = jQuery( "