在javascript中更改背景位置会混淆显示

Question

在我的HTML应用中，我有一个基于幻灯片的帮助系统。基本上，有许多幻灯片上有一些重叠按钮 - 加上prev / next按钮。我在一张大图像中将所有幻灯片作为精灵。我将此图像设置为帮助div的背景，然后使用background-position在幻灯片之间导航。这非常有效

这在桌面和Android平板电脑上运行得非常好，但是在ipad上更改背景位置并不起作用。看起来背景图像没有在新位置正确重绘 - 导致屏幕完全混乱。下面是在幻​​灯片之间来回导航一段时间后的样子图像。

如果在此div上显示另一个div然后隐藏，则所有内容都会正确重绘，但是如果唯一改变的是背景图像的位置，则屏幕不会被重绘。有什么可以做的吗？有可用的解决方法吗？

编辑：在进一步调查中，显然只会重新绘制任何其他内容所在的背景部分。如果背景的某些部分没有内容，则不会重绘这些部分。在我看来，这似乎是iOS / Webkit中的一个错误。

编辑2：如果您有兴趣，可以点击我的代码：

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

尝试使用translate() CSS3转换功能，只有在浏览器不支持时才会改回background-position。

如果您使用的是jQuery，Transit插件的效果非常好： http://ricostacruz.com/jquery.transit/

Answer 2

我无法找到bug的解决方法，所以我从背景图像和背景位置移动到使用绝对定位的图像并更改left css属性。这就是我最终的结果：

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');
    }
}

现在在HTML中：

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