jQuery UI sortable() - listitem jumps to top in Safari and Chrome

Question

I have a sortable unordered list on the bottom of my page, which works perfect in Firefox. However, in Safari/Chrome the grabbed listitem jumps instantly to the top of the page when I want to drag it, like the UL is on top of the window. Does anyone know what's going on here?

Thanks. Lex.

Here's the code:

HTML (and PHP):

<ul id="list">     <?         foreach($downloads as $download)         {             echo "<li class='downloads'><a rel='".$download->id."' href='".$base_url."downloads/".$download->id."'>".$download->title."</a></li>";         }     ?> </ul> 

CSS:

ul#list {     padding: 10px 0;     display: block; } ul#list li {     background: #fff;     padding: 10px;     color: #bc1e2c;     -moz-border-radius: 10px;     -webkit-border-radius: 10px;     font-weight: bold;     margin: 10px 0;     display: block; }  ul#list li:hover {     background: #212121;     color: #fff;     cursor: move; } 

JS:

$(".alter-content ul#list").sortable({     update : saveSortorder,     containment: 'parent' }); 

Answer 1

I had the same problem. It worked well in Firefox but kept jumping in Safari and Chrome. I finally fixed it by adding overflow: auto; to the unsorted list in my CSS.

I didn't even have to specify the height of the UL.