CSS фоновое изображение исчезает в Chrome

Question

Эта проблема возникает только в Google Chrome на Mac OS X (Chrome 17). Я протестировал его во всех основных браузерах на Mac и Windows 7.

Вот эта страница: http://dealsfortherich.com/drop/

Как видите, я загружаю div через JQuery AJAX. На странице «Все в порядке» всегда нормально.
Вы можете перемещаться по страницам с помощью стрелок влево и вправо. Проблема возникает, когда вы меняете страницы; особенно когда вы меняете страницы при быстрой прокрутке страницы. Попробуйте прокрутить страницу вниз очень быстро и нажмите стрелку вправо. Фоновые изображения, которые уже были загружены с помощью CSS (например):

.sort_block{ background: url(images/sort_block.png) no-repeat;}

начинают исчезать. Только фоновые изображения, загруженные с помощью CSS, начинают исчезать. Все в порядке. Если вы откроете Инструменты разработчика в Chrome, проверьте элементы, вы увидите, что браузер имеет правильный синтаксис и уже загрузил изображение в свой кэш. По какой-то причине он просто не может отобразить это. Значение отображения CSS является правильным. В Инспекторе, для div с отсутствующим фоном, если вы измените значение, например, "top: 8px;" наверх: 9px; изображение внезапно появляется.

Это происходит только в Chrome (v. 17) и Chrome Canary (v. 19) для Mac OS X (10.7.3). Должен ли я сообщить об этой ошибке в Google, или есть известное решение или исправление? Я думаю, я могу заменить s на s, но я бы предпочел сделать это правильно и исправить эту странную проблему.

Answer 1

Я не знаю, если это та же проблема, но, вероятно, тот же корень: http://code.google.com/p/chromium/issues/detail?id=111218. На основании этого отчета, я не думаю, что есть еще известные исправления.

Answer 2

У меня была такая же проблема, и я диагностировал ее часами, но дело не в вашем коде, это ошибка памяти в последней версии Chrome.По моему опыту, это не происходит с маленькими изображениями, поэтому временным решением было бы уменьшить размер файла (до 10 КБ или около того).

У меня есть тестовый файл, показывающий разницу между большимии небольшое фоновое изображение.

http://kolina.fi/chrometest.html

Answer 3

Мы работали над решением этой проблемы, пока Chromium / Chrome не исправит ошибку (привет, Милтон) ...

Мой коллега Андрей разместил наше решение здесь: http://blog.andrewcantino.com/blog/2012/02/15/fixing-the-chrome-background-refresh-bug/

Вы можете увидеть данную страницу по адресу: http://www.mavenlink.com/tour

Похоже, это сработало и для других, но это ужасно!

Answer 4

У меня недавно была эта проблема, и исправление заключалось в использовании полного URL-адреса, а не относительного пути.

Например, изменение url(images/image.png)

на

url("http://yoursite.com/images/image.png")

Answer 5

Использование: URL (.// Путь к изображениям. .// должен решить проблему.