#6984 closed bug (notabug)

Opened February 14, 2011 10:23AM UTC

Closed March 16, 2011 07:23AM UTC

Sortable in Tab is offset after scrolling page in IE9 RC

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

Please refer to http://awa.sh which will show a reduced test case on a single page.

In IE9 RC, if you scroll the page down (even a little bit) and then drag an item up or down in the list, the image of the dragged item will be offset in an incorrect position lower on the page than it should be.

If this same test is done in Firefox, this issue does not occur.

The issue does not occur if the sortable list is not inside a jQuery tab.

The test case was created by the following code put in an .html file and placed inside the 1.8.9 development bundle at development-bundle\\demos\\sortable\\.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Sortable in Tab is offset after scrolling page in IE9 RC</title>
  <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
  <script src="../../jquery-1.4.4.js"></script>
  <script src="../../ui/jquery.ui.core.js"></script>
  <script src="../../ui/jquery.ui.widget.js"></script>
  <script src="../../ui/jquery.ui.mouse.js"></script>
  <script src="../../ui/jquery.ui.sortable.js"></script>
  <script src="../../ui/jquery.ui.droppable.js"></script>
  <script src="../../ui/jquery.ui.tabs.js"></script>
  <link rel="stylesheet" href="../demos.css">
  <style>
  #sortable1 li, #sortable2 li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px; }
  </style>
  <script>
  $(function() {
    $( "#sortable1, #sortable2" ).sortable().disableSelection();

    var $tabs = $( "#tabs" ).tabs();

  });
  </script>
</head>
<body>
<div class="demo">

<div class="demo-description">
<p>In IE9 RC, scroll browser page down.  Then drag an item in the list up/down.
It will be offset incorrectly.  Firefox doesn't have this issue.</p>
</div><!-- End demo-description -->

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">TAB ONE</a></li>
    <li><a href="#tabs-2">TAB TWO</a></li>
  </ul>
  <div id="tabs-1">
    <ul id="sortable1" class="connectedSortable ui-helper-reset">
      <li class="ui-state-default">Item 1</li>
      <li class="ui-state-default">Item 2</li>
      <li class="ui-state-default">Item 3</li>
      <li class="ui-state-default">Item 4</li>
      <li class="ui-state-default">Item 5</li>
      <li class="ui-state-default">Item 6</li>
      <li class="ui-state-default">Item 7</li>
      <li class="ui-state-default">Item 8</li>
      <li class="ui-state-default">Item 9</li>
      <li class="ui-state-default">Item 10</li>
      <li class="ui-state-default">Item 11</li>
      <li class="ui-state-default">Item 12</li>
      <li class="ui-state-default">Item 13</li>
      <li class="ui-state-default">Item 14</li>
      <li class="ui-state-default">Item 15</li>
      <li class="ui-state-default">Item 16</li>
      <li class="ui-state-default">Item 17</li>
      <li class="ui-state-default">Item 18</li>
      <li class="ui-state-default">Item 19</li>
      <li class="ui-state-default">Item 20</li>
      <li class="ui-state-default">Item 21</li>
      <li class="ui-state-default">Item 22</li>
      <li class="ui-state-default">Item 23</li>
      <li class="ui-state-default">Item 24</li>
      <li class="ui-state-default">Item 25</li>
      <li class="ui-state-default">Item 26</li>
      <li class="ui-state-default">Item 27</li>
      <li class="ui-state-default">Item 28</li>
      <li class="ui-state-default">Item 29</li>
      <li class="ui-state-default">Item 30</li>
      <li class="ui-state-default">Item 31</li>
      <li class="ui-state-default">Item 32</li>
      <li class="ui-state-default">Item 33</li>
      <li class="ui-state-default">Item 34</li>
      <li class="ui-state-default">Item 35</li>
      <li class="ui-state-default">Item 36</li>
      <li class="ui-state-default">Item 37</li>
      <li class="ui-state-default">Item 38</li>
      <li class="ui-state-default">Item 39</li>
      <li class="ui-state-default">Item 40</li>
    </ul>
  </div>
  <div id="tabs-2">
    <ul id="sortable2" class="connectedSortable ui-helper-reset">
      <li class="ui-state-highlight">Item 1</li>
      <li class="ui-state-highlight">Item 2</li>
      <li class="ui-state-highlight">Item 3</li>
      <li class="ui-state-highlight">Item 4</li>
      <li class="ui-state-highlight">Item 5</li>
      <li class="ui-state-highlight">Item 6</li>
      <li class="ui-state-highlight">Item 7</li>
      <li class="ui-state-highlight">Item 8</li>
      <li class="ui-state-highlight">Item 9</li>
      <li class="ui-state-highlight">Item 10</li>
      <li class="ui-state-highlight">Item 11</li>
      <li class="ui-state-highlight">Item 12</li>
      <li class="ui-state-highlight">Item 13</li>
      <li class="ui-state-highlight">Item 14</li>
      <li class="ui-state-highlight">Item 15</li>
      <li class="ui-state-highlight">Item 16</li>
      <li class="ui-state-highlight">Item 17</li>
      <li class="ui-state-highlight">Item 18</li>
      <li class="ui-state-highlight">Item 19</li>
      <li class="ui-state-highlight">Item 20</li>
      <li class="ui-state-highlight">Item 21</li>
      <li class="ui-state-highlight">Item 22</li>
      <li class="ui-state-highlight">Item 23</li>
      <li class="ui-state-highlight">Item 24</li>
      <li class="ui-state-highlight">Item 25</li>
      <li class="ui-state-highlight">Item 26</li>
      <li class="ui-state-highlight">Item 27</li>
      <li class="ui-state-highlight">Item 28</li>
      <li class="ui-state-highlight">Item 29</li>
      <li class="ui-state-highlight">Item 30</li>
      <li class="ui-state-highlight">Item 31</li>
      <li class="ui-state-highlight">Item 32</li>
      <li class="ui-state-highlight">Item 33</li>
      <li class="ui-state-highlight">Item 34</li>
      <li class="ui-state-highlight">Item 35</li>
      <li class="ui-state-highlight">Item 36</li>
      <li class="ui-state-highlight">Item 37</li>
      <li class="ui-state-highlight">Item 38</li>
      <li class="ui-state-highlight">Item 39</li>
      <li class="ui-state-highlight">Item 40</li>
    </ul>
  </div>
</div>

</div><!-- End demo -->



<div class="demo-description">
<p>In IE9 RC, scroll browser page down.  Then drag an item in the list up/down.
It will be offset incorrectly.  Firefox doesn't have this issue.</p>
</div><!-- End demo-description -->

</body>
</html>
Attachments (0)
Change History (2)

Changed March 16, 2011 01:32AM UTC by EricTN comment:1

This issue appears to be resolved with the release of IE 9 RTM version 9.0.8112.16421. The ticket can therefore be closed.

Changed March 16, 2011 07:23AM UTC by rdworth comment:2

resolution: → invalid
status: new → closed

Closed per reporter