Chrome отображает загрузочный GIF по-другому, чем Safari и Firefox

У меня возникают проблемы с загрузкой изображения в хром, он отлично выглядит в сафари и 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);
        }
    }