Question

I wrote a little sliding-script based on jQuery. To remember, which slide is currently active and to restore this slide on a reload, the location.hash is updated. In Chrome, this works just fine. In Opera and Firefox, the animation shows some odd behaviour. Though the CSS property is updated to the correct value, the sliding finishes between two slides. This behaviour is only present, when the location.hash property is updated.

Are there known complications when combining these two mechanisms? I cannot really imagine how they affect each other.

The relevant JavaScript code:

var currentPage = 0;
var lock = false;
var transitionTime = 500;

function changePage( direction ) {
    if( lock )
        return;

    var currIndex = currentPage;
    var nextIndex = currentPage + direction;

    var cPage = $( '#page' + currIndex );
    var nPage = $( '#page' + nextIndex );

    if( cPage.length == 0 || nPage.length == 0 )
        return;

    // Set lock
    lock = true;

    // Animate scrolling container
    var newPosition = -800 * nextIndex;
    $( '#scroller' ).animate( {
        left: newPosition
    }, transitionTime, function() {
        // Remove lock
        lock = false;
    } );

    currentPage = nextIndex;
    location.hash = 'page' + nextIndex;
}

jsFiddle Remove /show/ from address bar to access jsFiddle edit page. Navigation is done via the arrow keys.

Answer 1

After testing, it seems that the wrapper div is being moved to the left a little as the scroller div is moved left. Change the position of the wrapper div to fixed and it will resolve your issue.

div#wrapper {
    height: 220px;
    left: 50%;
    margin-left: -375px;
    margin-top: -150px;
    position: fixed;
    top: 50%;
    width: 680px;
} 

Happy Coding! Here is the example fiddle.