Was wondering if you have come across before?

CSS

#photos, .slider {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    height: auto;
    width: auto;
}

JS

gallery.slider = $('#photos .slider').royalSlider({
    autoHeight: true,
    autoWidth: true,
    arrowsNav: false,
    fadeinLoadedSlide: false,
    controlNavigationSpacing: 0,
    navigateByClick: false,
    //imageScaleMode: 'fill',
    imageAlignCenter:true,
    loop: false,
    loopRewind: false,
    numImagesToPreload: 6,
    keyboardNavEnabled: true,
    autoScaleSlider: false
}).data('royalSlider');

There is a 4px gap in Firefox. There is a bigger gap on the iPad. The image isn't stretching to fill the screen. When I inspect the elements in Firebug the .slider container is 641px height. .rsOverflow is 637px. The image is 1800x1200 so should be big enough to stretch.

Do you have any idea why this is happening? I have commented out all other JS and CSS on the page and it still occurs.