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

Question

I am having trouble with a loading image in chrome, it looks fine in safari and firefox, but in chrome I get the view of two half loading images instead of one whole one. I am not sure how to solve this problem, any help is appreciated.

THE HTML:

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

THE CSS:

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

Part of THE JS that references the loading animation:

    $(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

Check the CSS styles on the .loading div while the animation is running. You'll probably see that both x and y axis are being overwritten. Can't say much more without a fiddle, but probably chrome sets background-position-y to 50%. So probably you should also use 'background-position-x' also in chrome :)