Исходное изображение CSS исчезает в Chrome

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

Вот страница, о которой идет речь: http://dealsfortherich.com/drop/

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

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

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

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

Ответ 1

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

Ответ 2

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

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

http://kolina.fi/chrometest.html

Ответ 3

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

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

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

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

Ответ 4

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

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

к

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

Ответ 5

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