Вчера я столкнулся с похожей проблемой - у меня есть вертикальное меню, в котором слева от элемента меню на выбранной в данный момент странице есть фоновый рисунок «blob». Это прекрасно работает во всех браузерах. Затем я добавил в меню то же фоновое изображение, что и ролловер, используя «a: hover». Это прекрасно работает во всех браузерах, кроме мобильных / iOS Safari. Когда я использую меню на iPad, блоб-графика полностью исчезает через некоторый, казалось бы, случайный интервал и никогда не возвращается, пока я не обновлю изображение и HTML-файлы на сервере. (Очистка кэша Safari не имеет никакого эффекта).
Это мое предположение о том, почему это происходит и как я это решил ...
Поведение: hover на устройствах с сенсорным экраном, таких как iPad / iPhone, нарушено (потому что вы не можете на самом деле зависать на сенсорном экране). Таким образом, эффект от наведения, по-видимому, заключается в том, что браузер полагает, что изображение, связанное с наведением, является избыточным и поэтому не кэширует его. Однако при следующей загрузке страницы с изображением-наведением запрос к серверу обнаружит, что файл изображения не был изменен, и, таким образом, сочтет ненужным его извлечение (с сервера), и, следовательно, попытается использовать локальная кэшированная копия, которая, как я полагаю, не существует (или, по крайней мере, не правильно). Это приводит к исчезновению изображения (все его копии на странице исчезают).
Таким образом, если вы используете один и тот же физический файл изображения для фона элемента наведения и для изображения меню текущей страницы (или любого другого изображения на странице), оба / все будут эффективно исчезать, когда браузер решит использовать его (несуществующую) кэшированную версию.
Одно решение состоит в том, чтобы иметь два идентичных файла изображения и использовать один для элемента меню с наведением курсора, а другой - для любого другого места, где это требуется. Тогда не имеет значения, отменяет ли Mobile-Safari тот, который связан с наведением (так как на этих устройствах отсутствует эффект ролловера), но это не повлияет на графику, связанную с любыми другими элементами меню (например, чтобы пометить текущий или что-то еще).
Можете ли вы дать мне знать, если это решит вашу проблему? Я ничего не мог найти об этой конкретной ошибке, несмотря на часы поиска.