Фоновые изображения, исчезающие в iOS Safari

Я работаю над мобильной версией сайта, и я эмулирую интерфейс iOS. На сайте есть несколько мест, где есть вспомогательные спрайты (шеврон превращается в значок загрузки gif / greyscale, превращается в цветной значок).

Он работает безупречно на рабочем столе Safari и является пятнистым на мобильном Safari. Иногда изображения будут загружаться, а не другие; значки будут загружаться, но шевроны не будут; они загружаются на мой iPhone, но не мой iPad и наоборот.

У меня нет ошибок в консоли Debug. Вот HTML и CSS:

CSS:

footer li ai {display:block; height:24px; width:24px; margin:0 auto;} footer li a i.foo {background:url(../images/sprite-jobs.png) 0px 0px no-repeat;} footer li a:hover i.foo {background:url(../images/sprite-jobs.png) 0px -24px no-repeat;} 

HTML:

 <li><a href="#link"><i class="foo"></i>Text</a></li> 

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

2 Solutions collect form web for “Фоновые изображения, исчезающие в iOS Safari”

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

Это мое предположение, почему это происходит и как я это решил …

Поведение: поведение на сенсорных экранах, таких как iPad / iPhone, нарушено (потому что вы не можете навести на сенсорный экран). Таким образом, эффект использования зависания, похоже, заключается в том, что браузер считает, что изображение, связанное с наведением, является избыточным и, следовательно, не кэширует его. Однако, когда страница с изображением hover-image будет загружена, запрос на сервер обнаружит, что файл изображения не был изменен и, следовательно, не нужно его извлекать (с сервера) и, следовательно, попытаться использовать локальная кешированная копия, которая, я полагаю, не существует (или, по крайней мере, не правильно). Это приведет к исчезновению изображения (все его копии на странице исчезают).

Таким образом, если вы используете один и тот же физический файл изображения на фоне объекта hover и для изображения меню текущей страницы (или любого другого изображения на странице), оба / все будут эффективно исчезать, когда браузер решит использовать его ( не существует) кешированная версия.

Одно из решений состоит в том, чтобы иметь два одинаковых файла изображения и использовать один для элемента меню с зависанием, а другой – в любом другом месте. Тогда не имеет значения, отключает ли Mobile-Safari ту, которая связана с зависанием (поскольку на этих устройствах нет эффекта опрокидывания), но это не повлияет на графику, связанную с любыми другими пунктами меню (например, чтобы отметить текущий страница или что-то еще).

Можете ли вы сообщить мне, если это решит вашу проблему? Я не мог найти ничего об этой конкретной ошибке, несмотря на часы поиска.

Вероятно, он не исчезает сам по себе, а скользит в два раза ниже изображения, как вы планировали на дисплеях Retina, a la: повышение качества изображения для iphone 4 от 72ppi до 326ppi

Простой тест: удвоить изображение по вертикали и повторите попытку. Скорее всего, вы увидите версию размера в 1/2 размера, которую вы планировали появиться там, из-за раздражающего способа обработки фоновых изображений iPhone 4.

  • Создание IAP - Нет «Хостинг контента»
  • Push-уведомления на Apple Watch
  • Как добавить несколько элементов UIBarButton в навигационную панель?
  • Отношения с основными данными потеряны после обновления приложения
  • Как можно динамически преобразовать имя класса Swift?
  • Как отключить звук в AVAudioPlayer?
  • iOS 5.0.1: Как проверить, что папка отмечена как «Не создавать резервные копии» для iCloud?
  • Любой способ разместить приложение в фоновом режиме и перезапустить в Appium iOS
  • От приложения SWF до AIR для iOS
  • Разбор JSON против разбора XML в iOS
  • Xcode - предупреждение Linker с библиотекой - Debug-iphonesimulator vs. Debug-iphoneos
  • PhoneC: Разработка iOS проста с помощью XCode, Swift3, UITableView, cocatouch, давайте создадим приложения для iPhone, iPad и Macbook.