Changing background position in javascript messes up display

Question

In my HTML app, I have a slides-based help system. Essentially, there are a number of slides with some overlayed buttons on them - plus the prev/next buttons. I have all slides as sprites in one large image. I set this image as the background of the help div and then use background-position to navigate between slides. This works perfectly well

This works perfectly fine on the desktop and android tablet, however on ipad changing the background position doesn't work. It looks like the background image is not being redrawn correctly at the new position - causing the screen to be completely messed up. Below is the image of what it looks like after navigating back and forth between slides for a while.

If another div is shown over this div and then hidden, then everything is redrawn correctly, however if the only thing changing is the position of the background image, then the screen is not being redrawn. Is there anything that can be done? Is there a workaround available?

EDIT: On further investigation, apparently, only the part of the background over which any other content is positioned gets redrawn. If there is no content over parts of the background, then those parts are not redrawn. This clearly seems to me like a bug in iOS/Webkit.

EDIT 2: If you're interested, here's my code:

var slides = [...];
var slideWidth = 753;
var curSlide = 0;

$(document).ready(function() {
    ...
    $('#button-help-next').on('click',function() { moveSlide(1); });
    $('#button-help-prev').on('click',function() { moveSlide(-1); });
    ...
});

function moveSlide(dir) {
    var newSlide = curSlide + dir;
    if(newSlide < 0) {
        newSlide = 0;
    }
    if(newSlide >= slides.length - 1) {
        newSlide = slides.length - 1;
    }
    if(newSlide != curSlide) {
        curSlide = newSlide;
        $('#slides').css('background-position', (-curSlide * slideWidth) + 'px 0px');
    }
}

Answer 1

I haven't been able to find a workaround for the bug, so I moved away from a background image and background-position to using an absolutely positioned image and changing the left css attribute. Here's what I ended up with:

function moveSlide(dir) {
    var newSlide = curSlide + dir;
    if(newSlide < 0) {
        newSlide = 0;
    }
    if(newSlide >= slides.length - 1) {
        newSlide = slides.length - 1;
    }
    if(newSlide != curSlide) {
        curSlide = newSlide;
        $('#slides-image').css('left', (-curSlide * slideWidth) + 'px 0px');
    }
}

And in HTML it's now:

<div id="slides">
    <img id="slides-image" src="images/help/slides.png"/>
</div>

Answer 2

Try using the translate() CSS3 Transform function instead, falling back to changing the background-position only if the browser does not support it.

If you are using jQuery, the Transit plugin works quite well: http://ricostacruz.com/jquery.transit/