4

Currently running chrome 14, and it fails to render a spinning gif graphic on my login page.

Here is what the page looks like in chrome:

enter image description here

Here is what it looks like on all other browers:

enter image description here

To reproduce:

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

Enter a valid email and password and hit 'login', then when the black progress indicator appears, hit STOP so that the browser doesnt have a chance to give you a login error.

Notice that the background is not displayed in chrome. Interestingly, if you inspect the element, and add 1px to the background image position, the image will become visible.

Smells like a chrome bug to me, but is there a workaround?

edit: Another really strange thing is: if i put an alert at the end of the function that shows this processing div, after the alert, the background-image becomes visible.

mkoryak
  • 57,086
  • 61
  • 201
  • 257

2 Answers2

5

I can reproduce your problem, but if I manually trigger the popup in the console, I see the spinner just fine:

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

So here's my guess - your spinner hasn't been preloaded, and you're opening the window while you wait for an AJAX request. For whatever reason, other browsers will load the image while the AJAX request is pending, but Chrome won't. To test this, I tried this in the console:

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

then tried to log in normally - and I saw the spinner.

So I think if you preload your spinner image, maybe with the code above, and it should work properly.

nrabinowitz
  • 55,314
  • 10
  • 149
  • 165
  • If you want to keep it CSS dependent you might want to use this `var bg = $(this).css('background-image'); bg = bg.replace('url(','').replace(')',''); var forceChromeToLoadImage = $('');` see http://stackoverflow.com/questions/8809876/can-i-get-divs-background-image-url – Adriano Aug 05 '13 at 13:23
0

I bumped into issues when using nrabinowitz's answer.

So I ended up including the relevant image somewhere in the page with 0 dimensions.

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]
});

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

EDIT: this issue may have been fixed now in 2016

Adriano
  • 19,463
  • 19
  • 103
  • 140