chrome不会渲染gif背景图片

Question

目前正在运行chrome 14，它无法在我的登录页面上呈现旋转的gif图形。

以下是chrome中的页面：

以下是所有其他浏览器的外观：

要重现：

http://trunk.test.openmile.com/login/#null

输入有效的电子邮件和密码并点击“登录”，然后当出现黑色进度指示器时，点击“停止”，以便浏览器没有机会给你一个登录错误。

请注意，背景不会显示在chrome中。有趣的是，如果您检查元素，并将1px添加到背景图像位置，图像将变为可见。

对我来说闻起来像 chrome bug ，但是有解决方法吗？

修改： 另一个非常奇怪的事情是：如果我在显示此处理div的函数末尾放置alert，则在警报之后，背景图像变为可见。

Answer 1

我可以重现你的问题，但如果我手动触发控制台中的弹出窗口，我看到微调器就好了：

> OM.processing($('div.portlet.login form'));

所以这是我的猜测 - 你的微调器没有被预加载，你在等待AJAX​​请求时打开窗口。无论出于何种原因，其他浏览器将在AJAX请求待处理时加载图像，但Chrome不会。为了测试这个，我在控制台中尝试了这个：

> var img = $('<img src="http://trunk.test.openmile.com/static/9753/images/processing_black.gif">');

然后尝试正常登录 - 我看到了旋转器。

所以我认为如果你预先加载你的微调器图像，可能使用上面的代码，它应该正常工作。

Answer 2

在使用nrabinowitz的回答时我遇到了问题。

所以我最终在页面中的某个位置包含0维的相关图像。

HTML：

<input class="button" id="myButton" type="submit" name="searchButton" />
...

<img class="loaderHackForChrome" src="" width="0" heigh="0">

使用Javascript：

/*
  Hack for Chrome issue with GIF bg images
    [1] gets the bg url from the CSS
    [2] Extract the path: by removing opening string "url(" and closing character ")" that surround it
    [3] Sets the relevant image tag with our GIF image's path
*/
$('#myButton').click( function() {
    var bg = $(this).css('background-image');   // [1]
    bg = bg.replace('url(','').replace(')',''); // [2]
    $('.loaderHackForChrome').att('src', bg);   // [3]
});

来源：http://chromespot.com/forum/google-chrome-troubleshooting/4336-background-image-doesnt-load.html

编辑：此问题现在可能已在 2016

中修复