Skip to main content

Search and Top Navigation

Ticket #4438: index.html


File index.html, 3.0 KB (added by FernandoFerreira, April 06, 2009 03:00PM UTC)

Minmal testcase to illustrate the bug

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Minimal testcase</title>
<style type="text/css">
html {
  padding: 50px 0 0 50px;
  margin: 0;
  background: white;
  height: 100%;
  width: 100%;
}
body {
  position: relative;
  padding: 0;
  margin: 20px 0 0 20px !important;
  width: 900px;
  min-height: 400px;
  background: green;
}
</style>
<script src="http://jquery-ui.googlecode.com/svn/trunk/jquery-1.3.2.js" type="text/javascript"></script>
<script src="http://jquery-ui.googlecode.com/svn/trunk/ui/ui.core.js" type="text/javascript"></script>
<script src="http://jquery-ui.googlecode.com/svn/trunk/ui/ui.selectable.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(
  function(){
    $('body').selectable();
  }
);
</script>
</head>
<body>
  <p>Minimal testcase to illustrate what happens when:</p>
  <ol>
    <li>The body has position: relative</li>
    <li>There is an offset between the body top (or left) and the document top (or left)</li>
  </ol>
  <p>The abnormal behaviour is in the helper, whose position is offset by the same ammount the body is, in this example meaning 70px in each direction (50px because of the html padding, and 20px because of the body margin).</p>
  <p>Drag the mouse cursor inside the green body to illustrate the bug.</p>
  <p>What causes this bug is the assumption that origin point of the body (0,0) will be the same of the document, making the absolute coordinates of the helper relative to the body coincide with the one relative to the document. That happens to be true if the body position is static, delegating the origin point (0,0) to the document.</p>
  <p>That ceases to be true when the body position is set to relative, triggering the condition for this bug to appear.</p>
  <p>One possible solution is to discount the body offset in the value of pageX and pageY, the the lines <a href="http://dev.jqueryui.com/browser/trunk/ui/ui.selectable.js#L67">67</a> and <a href="http://dev.jqueryui.com/browser/trunk/ui/ui.selectable.js#L134">134</a> of the ui.selectable.js file, like this:</p>
  <code>
  this.opos = [event.pageX - document.body.getClientRects()[0].left - (document.documentElement.scrollLeft||document.body.scrollLeft), event.pageY - document.body.getClientRects()[0].top - (document.documentElement.scrollTop||document.body.scrollTop)];
  </code>
<p>and</p> 
  <code>
  var x1 = this.opos[0], y1 = this.opos[1], x2 = event.pageX - document.body.getClientRects()[0].left - (document.documentElement.scrollLeft||document.body.scrollLeft), y2 = event.pageY - document.body.getClientRects()[0].top - (document.documentElement.scrollTop||document.body.scrollTop);
  </code>
  <p>Unfortunetaly, document.body.getClientRects() doesn't work on webkit based browsers, so this is probably not the right solution</p>
</body>
</html>

Download in other formats:

Original Format