Насколько я могу судить, эта проблема специфична для Firefox. (Я использую FF 4.0.1 на Win7 Ultimate.)
У меня есть страница, на которой мне нужно отобразить случайное фоновое изображение. Я использую небольшой скрипт php (rotate.php), чтобы сделать трюк. Так что мой CSS в основном читается как:
#main {background-image: url(bg/rotate.php);}
(я упоминаю об этом, потому что, по-моему, Firefox несколько смущен тем, что изображение name не изменяется, хотя content изображения меняется.)
Кроме того, у меня есть небольшая анимация (выполненная в javascript), в которой небольшая точка падает с верхней части страницы. Анимированный элемент (содержащий эту точку) проходит через элемент #main (и его случайное фоновое изображение).
Проблема в том, что Firefox неправильно обновляет фоновое изображение при обновлении страницы.
Кажется, что Firefox на самом деле сначала отображает фоновое изображение из предыдущей загрузки страницы, и только когда анимация запускается поверх этого изображения, Firefox фактически обновляет изображение, , но обновляет только часть покрыты анимированным элементом . В результате получается сочетание обоих изображений (загрузка предыдущей страницы, загрузка текущей страницы).
Только при изменении размера окна (например, открывая / закрывая Firebug) Firefox полностью перерисовывает изображение (и, наконец, отображает новое изображение целиком).
Вы можете увидеть проблему в действии здесь: http://www.terpsycordes.com/en/home (Вам может потребоваться перезагрузить несколько раз, чтобы получить два разных изображения подряд и увидеть проблему, и вам придется подождать несколько секунд для анимации для начала.) (Еще раз, похоже, только для Firefox.)
У вас есть идея избежать этого уродливого эффекта? Есть ли какая-нибудь хитрость, чтобы заставить Firefox перерисовать изображение?
Заранее спасибо.
Редактировать:
Благодаря ссылке, предоставленной DavidJCobb, я попробовал различные трюки javascript, чтобы заставить Firefox перерисовать фоновое изображение. Результат пока не совсем удовлетворительный, но все равно лучше, чем раньше. Вот что я нашел во время тестирования (надеюсь, это кому-нибудь поможет):
- изменение непрозрачности элемента (#main) (даже незначительное) или придание ему прозрачного контура вызывает перерисовку (и, таким образом, новое изображение отображается полностью);
- изменение класса элемента также работает, , если примененный класс существует и влияет на некоторые свойства элемента (например, контур);
- однако ничего из этого не работает, если установлено сразу при загрузке страницы: мне нужно подождать около 100 мсек, прежде чем запускать эти события, чтобы перерисовка была эффективной.
Так что я все еще вижу предыдущее изображение в течение короткого момента, прежде чем оно будет обновлено. Если у кого-нибудь есть советы, как это улучшить, я буду рад это услышать.