Firefox - прозрачный png, принимающий атрибуты фона CSS, в то время как firefox обновляет кэшированные изображения

Question

Работая над имиджевым веб-сайтом, обнаружил странную ошибку (?) В Firefox. Любые свойства фона CSS отображаются на прозрачных png. Это происходит после первоначального рендеринга, во время обновления кэша. Это выглядит как мерцание, если вы используете широкополосный доступ, но становится чрезвычайно заметным при уменьшении пропускной способности.

Общая прогрессия проблемы выглядит так:

1. Страница и изображения отображаются из кеша
2. Firefox удаляет кэшированные изображения.
3. Firefox начинает перезагружать изображения, но отображает окно со свойствами CSS фона.

Я воссоздал (ужасно красочный) пример , но вам может понадобиться использовать fiddler или другую программу с регулированием пропускной способности / эмуляцией, чтобы увидеть что-то большее, чем мерцание. Очевидно, вам также придется загрузить один раз, а затем обновить, чтобы увидеть ошибку. И опять же, это только в Firefox.

Я пробовал множество разных предложений, но ни одно из них не сработало. Просто нужно a исправить, хаки будут работать до тех пор, пока они не влияют на другие браузеры.

РЕДАКТИРОВАТЬ: Вот видео , чтобы вы могли увидеть его в действии.

Answer 1

Поскольку я не могу воссоздать проблему на моем Firefox (10.0.2) на моем компьютере (Win 7) с моим конкретным оборудованием (которое может или не может быть частью этой проблемы), я предлагаю следующее как предположение при решении, хотя я бы предположил, что вы уже пробовали.

Нацельтесь на свои img теги (желательно с некоторыми CSS более конкретными, чем ниже), с которыми у вас возникла проблема, и попробуйте установить одно из следующего:

Или:

img {background-color: transparent;}

Или:

img {background-color: transparent !important;}

Обновление: еще один возможный обходной путь

Пусть javascript сделает соответствующие теги img невидимыми для запуска, а также привязает к ним событие, чтобы при их загрузке они снова стали видимыми (пример JQuery):

$('img').css('visibility', 'hidden'); /*not using "display" keeps layout*/
$('img').bind('load', function() {
    $('img').css('visibility', 'visible');
});

Я не могу проверить вышеизложенное, поэтому нет гарантии, что это сработает, но это другая идея.