Chrome显示的加载gif与Safari和Firefox不同

Question

我在chrome中加载图片时遇到问题，在Safari和Firefox中看起来不错，但是在chrome中，我可以看到两个一半的加载图片，而不是一个完整的图片。 我不确定如何解决此问题，不胜感激。

HTML：

<div class="execute-actions">
    <div class="loading"></div>
</div>

CSS：

 .loading {
    position: relative;
    background: url("../../assets/img/core/loading.gif");
    background-position: 912px 0px;
    width: 48px;
    height: 48px;
}

引用加载动画的JS的一部分：

    $(window).ready(function () {
    if ($("html[data-useragent*='MSIE 8']").length) {
        if ($("div.loading")) {
            setInterval(function () {
                $("div.loading").css({"background-position-x": "-=48px" });
            }, 35);
        }
    } else {
        if ($("div.loading")) {
            setInterval(function () {
                $("div.loading").css({"background-position": "-=48px" });
            }, 35);
        }
    }

Answer 1

动画运行时，检查.loading div上的CSS样式。 您可能会看到x和y轴都被覆盖。 没有摆弄就不能说更多，但是chrome可能会将background-position-y设置为50％。 所以可能您也应该在chrome中也使用'background-position-x':)