List.js not sorting properly in Chrome

Question

So I noticed while sorting a bunch of stuff with list.js, it'll sort a bit weirdly in Chrome.

Here's a demo:
http://jsfiddle.net/xku3R/

If you press Category at the top, nothing should happen as the list is already sorted alphabetically on title and then by category. This works as intended in Firefox and Safari, but not in Chrome. Chrome will re-sort by title in some weird way.

I then noticed that if I remove the last entry with Design as category, it'll work as intended:
http://jsfiddle.net/5s5tB/

What could cause this behaviour?

JS

var articleList = new List('articlelist', {valueNames:  [ 'category', 'title' ]});

$('span.sort').click(function() {
    var value = $(this).data('sort');
    if(value == 'category') {
        articleList.sort('title', { asc: true })
        articleList.sort(value, { asc: true })  
    } else {
        articleList.sort(value, { asc: true })
    }
});

HTML

<ul>
    <li class="category">
        <span class="sort" data-sort="category">Category</span>
    </li>
    <li class="overflow">
        <span class="sort" data-sort="title">Title</span>
    </li>
</ul>

<main id="articlelist">
    <ul class="list">
        <li>
            <span class="category">Architecture</span> 
            <span class="overflow">
                <a class="title" href="http://someurl.com/djennes-mud-mosque/">Djenné’s Mud Mosque</a>
            </span>
        </li>
        <li>
            <span class="category">Architecture</span> 
            <span class="overflow">
                <a class="title" href="http://someurl.com/previ/">PREVI</a>
            </span> 
        </li>
        <li>
            <span class="category">Architecture</span> 
            <span class="overflow">
                <a class="title" href="http://someurl.com/revolutionary-housing-argentina/">Revolutionary housing in Argentina</a>
            </span>
        </li>
        <li>
            <span class="category">Architecture</span> 
            <span class="overflow">
                <a class="title" href="http://someurl.com/high-line/">The High Line</a>
            </span>
        </li>
        <li>
            <span class="category">Cities</span> 
            <span class="overflow">
                <a class="title" href="http://someurl.com/edge-city-sao-paulo/">Edge City (São Paulo)</a>
            </span>
        </li>
        <li>
            <span class="category">Cities</span> 
            <span class="overflow">
                <a class="title" href="http://someurl.com/istanbul/">Istanbul</a>
            </span>
        </li>
        <li>
            <span class="category">Cities</span> 
            <span class="overflow">
                <a class="title" href="http://someurl.com/jenin/">Jenin</a>
            </span>
        </li>
        <li>
            <span class="category">Cities</span> 
            <span class="overflow">
                <a class="title" href="http://someurl.com/rebuilding-beirut/">Rebuilding Beirut</a>
            </span>
        </li>
        <li>
            <span class="category">Cities</span> 
            <span class="overflow">
                <a class="title" href="http://someurl.com/shenzhen/">Shenzhen</a>
            </span>
        </li>
        <li>
            <span class="category">Cities</span> 
            <span class="overflow">
                <a class="title" href="http://someurl.com/unreal-estate-london/">Unreal Estate (London)</a>
            </span>
        </li>
    </ul>
</main>  

Answer 1

You are hit by Chrome's sort not being stable, meaning that sorting a second time will not necessarily keep the order created in first sort. Also I can not find anywhere that list.js states that it implements stable sort. Sorting an array of objects in Chrome