Strange draggable behavior in IE8

Question

For the default draggable listed on jqueryui :

http://jqueryui.com/draggable/

What determines the position of the current item being dragged ?

I'm experiencing an issue in IE8 where the item being dragged appears at a different height when I begin dragging it.

Below is normal behavior, mouse icon is drawn in blue to show correct position of item as it is being dragged :

But in IE8 the item as its being dragged is appearing at a different height once I begin dragging. Note badly drawn mouse icon in blue :

The height offset of the item being dragged and the mouse pointer position is dependent on the current scroll position of the entire page. So the more I scroll down the page the draggable appears higher in relation to the mouse pointer.

What could be causing this behavior ? I am unable to re-create it using small code snippet. This behavior is occurring within a large code base which makes it difficult to re-create.

Answer 1

This is what worked for me. The offset discrepancy between the item itself and the item being dragged is same as the scroll amount of page, so I just add the scroll value to ui.position.top :

function msieversion returns the internet explorer version.

drag: function(event,ui){

                  /**
                  * This issue just occurs on IE8
                  * issue : if page has been scrolled down any item which is dragged appears
                  * at a different position than item dragged
                  **/
                  if((msieversion() <= 8.0) && (document.documentElement.scrollTop > 0)){
                      ui.position.top += document.documentElement.scrollTop;
                  }
               }