Chrome 显示加载 gif 的方式与 Safari 和 Firefox 不同答案

【问题标题】：Chrome displaying loading gif differently than Safari and FirefoxChrome 显示加载 gif 的方式与 Safari 和 Firefox 不同
【发布时间】：2013-10-10 23:16:04
【问题描述】：

我在 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);
        }
    }

【问题讨论】：

你能发个小提琴吗？
background-position": "-=48px" 的预期行为是什么？在第一个中，如果您正在为一个轴设置动画。在第二个中，您正在为 x 轴设置动画，而 y 轴应该是 @987654324 @而不是0

标签： javascript jquery html css loading

【解决方案1】：

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

【讨论】：