Geek Answers Handbook

Chrome does not display gif background image

Chrome 14 is currently being chromed and there is no display of a rotating gif on my login page.

Here's what the page looks like in chrome:

enter image description here

Here's how it looks on all other browsers:

enter image description here

To reproduce:

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

Enter a valid email address and password and click "Sign In", and then when black progress indicator appears, press STOP so that the browser cannot give you a login error.

Please note that the background is not displayed in chrome. Interestingly, if you check the item and add 1px to the position of the background image, the image will become visible.

I like the chrome error , but is there a workaround?

edit : Another really strange thing: if I put alert at the end of the function that this div handler shows, the background image becomes visible after the warning.

+4
source share
2 answers

I can reproduce your problem, but if I manually launch a popup in the console, I see that spinner is just fine:

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

So here is my hunch: your counter has not been preloaded, and you open a window while you wait for the AJAX request. For some reason, other browsers are loading the image while the AJAX request is waiting, 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 I tried to log in normally - and I saw a counter.

Therefore, I think that if you preload the image with the spinner, perhaps using the code above, and it should work correctly.

+5
source

I ran into problems when using nrabinowitz answer.

So, I eventually included the corresponding image somewhere on the page with 0 sizes.

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 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 problem can be fixed in 2016

0
source

More articles:


All Articles