Please check this almost identical question first: jQuery Sortable List - scroll bar jumps up when sorting

I have exactly the same problem, only that I tried all the suggested solutions there with no luck

Here is the way to reproduce

• create a sortable list


• have it scrollable


• scroll down


• reorder items


• scroll position jumps up

Here is the code (see also in JSFiddle)

Html

<ul id=panel class=scroll>

    <li class=content style=background-color:red>item1</li>

    <li class=content style=background-color:green>item2</li>

    <li class=content style=background-color:blue>item3</li>

    <li class=content style=background-color:gray>item4</li>

    <li class=content style=background-color:yellow>item5</li>    

</ul>​

JavaScript

$(function() {

    $(#panel).sortable({

        items: .content,

        forcePlaceholderSize: true

    }).disableSelection();

    $(.content).disableSelection();



});​

CSS

.scroll{

    overflow: scroll;

    border:1px solid red;

    height: 200px;

    width: 150px;

}

.content{

    height: 50px;

    width: 100%;

}

​

Here is the code (in JSFiddle) after trying the notion of the accepted answer (with no luck)

I can try to understand why it happens (list get's shortened for a quick second), but all attempts to use placeholders or helpers to avoid it didn't work either. I feel I tried almost any permutation of the scrollable options with no luck

Browsers I tried

IE9, Firefox 10.0.1, and Chrome 17

JQuery versions

core 1.7.1, UI v 1.8.17

Am I doing something wrong? Is there a solution? Could it be a bug?