#7691 closed bug (notabug)

Opened September 04, 2011 08:47PM UTC

Closed September 05, 2011 01:53AM UTC

In webkit browsers elements positioned using percentages will not be positioned correctly

Reported by: maximiato Owned by:
Priority: minor Milestone: 1.9.0
Component: ui.position Version: 1.8.9
Keywords: Cc:
Blocked by: Blocking:
Description

When positioning an element with CSS top and left coordinates set in percentages, the ui.position component will not position the elements correctly at another element. I was able to reproduce this in:

Safari 5.1 on Mac OS X Lion,

Google Chrome 13.0.782.220 on Mac OS X Lion,

Google Chrome 13.0.782.220 on Windows 7

It does not happen in Firefox, so I guess this is a Webkit browser issue. The jQuery UI version I tested was 1.8.9. In the test case if you press the buttons 'Position DIV 1 (Relative) to DIV 4/5' or 'Position DIV 2 (Relative) to DIV 4/5', the element should be positioned to the right bottom of the destination DIV. This does not happen, the elements will be positioned incorrectly. 20% will simply change to 20px instead of the correct conversion.

Code to reproduce this error:

<html>
	<head>
	<title>jQuery UI Position bug test case</title>
	<script src='/js/jquery/jquery.js' type='text/javascript'></script>
	<script src='/js/jquery/ui/jquery.ui.core.js' type='text/javascript'></script>
	<script src='/js/jquery/ui/jquery.ui.widget.js' type='text/javascript'></script>
	<script src='/js/jquery/ui/jquery.ui.position.js' type='text/javascript'></script>
	<style type="text/css">
		body {
			font-family: "Lucida Sans", 'Verdana', sans-serif;
		}
		div {
			position: absolute;
		}
		.relative {
			background-color: #DDFFDD;
			border: 1px solid #000;
			z-index: 1;
		}
		.absolute {
			background-color: #FFDDDD;
			border: 1px solid #000;
			z-index: 2;
		}
		.destination {
			background-color: #DDDDFF;
			border: 1px solid #000;
			z-index: 0;
		}
	</style>
	<script type="text/javascript">
		function position1() {
			$('#relative1').position({my:'right bottom',at:'right bottom',of:$('#destination1')});
		}
		function position2() {
			$('#relative2').position({my:'right bottom',at:'right bottom',of:$('#destination1')});
		}
		function position3() {
			$('#absolute').position({my:'right bottom',at:'right bottom',of:$('#destination1')});
		}
		function position4() {
			$('#relative1').position({my:'right bottom',at:'right bottom',of:$('#destination2')});
		}
		function position5() {
			$('#relative2').position({my:'right bottom',at:'right bottom',of:$('#destination2')});
		}
		function position6() {
			$('#absolute').position({my:'right bottom',at:'right bottom',of:$('#destination2')});
		}
	</script>
	</head>
	<body>
		<button onmouseup="position1()">Position DIV 1 (Relative) at DIV 4</button>
		<button onmouseup="position2()">Position DIV 2 (Relative) at DIV 4</button>
		<button onmouseup="position3()">Position DIV 3 (Absolute) at DIV 4</button>
		<button onmouseup="position4()">Position DIV 1 (Relative) at DIV 5</button>
		<button onmouseup="position5()">Position DIV 2 (Relative) at DIV 5</button>
		<button onmouseup="position6()">Position DIV 3 (Absolute) at DIV 5</button><br />
		The DIVs should be positioned to the right bottom of the destination DIV. 
		In Safari or Chrome the first time positioning the DIV, 
		the DIV goes to the wrong coordinates 
		(% gets changed to px without the right conversion). 
		This only happens with DIV's positioned using percentages, with absolute
		and relative I am referring to the CSS coordinates, not to the CSS property. All
		DIVs have the absolute position property.
		<div class='relative' id='relative1' style='top:100px;left:20%;width:200px;'>Relative DIV 1</div>
		<div class='relative' id='relative2' style='top:50%;left:15%;width:15%;'>Relative DIV 2</div>
		<div class='absolute' id='absolute' style='top:500px;left:100px;'>Absolute DIV 3</div>
		<div class='destination' id='destination1' style='top:50%;left:50%;width:200px;height:200px;'>
			DIV 4 that will be aligned with,
			positioned relatively
		</div>
		<div class='destination' id='destination2' style='top:100px;left:600px;width:200px;height:200px;'>
			DIV 5 that will be aligned with,
			positioned absolutely
		</div>
	</body>
</html>
Attachments (0)
Change History (1)

Changed September 05, 2011 01:53AM UTC by scottgonzalez comment:1

resolution: → invalid
status: new → closed

Position doesn't support percentages. See #7028 for the feature request.