хром не рендерит gif фоновое изображение

Question

В настоящее время работает Chrome 14, и он не может отобразить вращающееся изображение GIF на моей странице входа в систему.

Вот как выглядит страница в Chrome:

Вот как это выглядит на всех других браузерах:

Воспроизвести:

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

Введите действительный адрес электронной почты и пароль и нажмите «Войти», затем, когда появится черный индикатор прогресса, нажмите «СТОП», чтобы у браузера не было возможности выдать ошибку при входе.

Обратите внимание, что фон не отображается в Chrome. Интересно, что если вы осмотрите элемент и добавите 1 пиксель к позиции фонового изображения, изображение станет видимым.

Пахнет для меня хромовой ошибкой , но есть ли обходной путь?

редактировать : Другая действительно странная вещь: если я поставлю alert в конце функции, которая показывает этот div обработки, после предупреждения фоновое изображение станет видимым.

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

Я столкнулся с проблемами при использовании ответа Нрабиновича.

Итак, я включил соответствующее изображение где-то на странице с 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