Resizable: use css() instead of position() for absolute placement. Fixes #3815 - Resizable: absolutely positioned element inside scrollable element is repositioned when resized

mikesherov · mikesherov · commit a1b32b59d57c · 2012-11-17T01:29:39.000-05:00
diff --git a/tests/unit/resizable/resizable_core.js b/tests/unit/resizable/resizable_core.js
@@ -162,12 +162,33 @@ test("handle with complex markup (#8756)", function() {
 		);
 
 	var handle = '.ui-resizable-w div', target = $('#resizable1').resizable({ handles: 'all' });
-	
+
 	TestHelpers.resizable.drag(handle, -50);
 	equal( target.width(), 150, "compare width" );
 
 	TestHelpers.resizable.drag(handle, 50);
 	equal( target.width(), 100, "compare width" );
 });
 
+test("resizable accounts for scroll position correctly (#3815)", function() {
+	expect( 3 );
+
+	var position, top, left,
+		container = $("<div style='overflow:scroll;height:300px;width:300px;position:relative;'></div>").appendTo("#qunit-fixture"),
+		overflowed = $("<div style='width: 1000px; height: 1000px;'></div>").appendTo( container ),
+		el = $("<div style='height:100px;width:100px;position:absolute;top:10px;left:10px;'></div>").appendTo( overflowed ).resizable({ handles: 'all' }),
+		handle = ".ui-resizable-e";
+
+	container.scrollLeft( 100 ).scrollTop( 100 );
+
+	position = el.position();
+	left = el.css("left");
+	top = el.css("top");
+
+	TestHelpers.resizable.drag(handle, 50, 50);
+	deepEqual( el.position(), position, "position stays the same when resized" );
+	equal( el.css("left"), left, "css('left') stays the same when resized" );
+	equal( el.css("top"), top, "css('top') stays the same when resized" );
+});
+
 })(jQuery);
diff --git a/ui/jquery.ui.resizable.js b/ui/jquery.ui.resizable.js
@@ -266,10 +266,11 @@ $.widget("ui.resizable", $.ui.mouse, {
 			el = this.element;
 
 		this.resizing = true;
-		this.documentScroll = { top: $(document).scrollTop(), left: $(document).scrollLeft() };
 
 		// bugfix for http://dev.jquery.com/ticket/1749
-		if (el.is('.ui-draggable') || (/absolute/).test(el.css('position'))) {
+		if ( (/absolute/).test( el.css('position') ) ) {
+			el.css({ position: 'absolute', top: el.css('top'), left: el.css('left') });
+		} else if (el.is('.ui-draggable')) {
 			el.css({ position: 'absolute', top: iniPos.top, left: iniPos.left });
 		}
 
