Исходный справочник iOS не отображается

Question

У меня на руках сложная ошибка.

Рассмотрение this page. images that accompany the paragraphs вызывается из спрайта, и по мере того, как область просмотра уменьшается, различные фоновые позиции вызывают для размещения различных макетов в гибком дизайне.

В ходе тестирования браузера все виды/устройства не содержат серьезных ошибок для всех устройств/браузеров, кроме IE < 9 ... и iOS (accompanying inspector view). Похоже, что почему-то iOS устройства (тот же вид/ширина отображается правильно на рабочем столе) по какой-то причине, не отображая ничего в этих div. Инспектор не вызывает ошибок, а сетевые таймеры показывают, что спрайт действительно загрузился.

Чтобы сгустить участок, я могу загрузить спрайт в сафари iOS, если я вызываю прямой URL. Перми устанавливаются значения 755 во всех объектах изображения, и я попытался использовать различные элементы dom (div, span, p, i) и фоновые методы (а именно:   в <div>, объявив content: ''; и наоборот content: ' ';);

Я тестировал это на Mac/Win Chrome/Firefox/Safari, устройствах Android, iPhone4/5 и iPad (iOS6). Устройства, которые не отображаются (по крайней мере, на моем оборудовании), фоновые divs - это iPhones и iPads.

У кого-нибудь есть понимание этого?

Answer 1

Существует ошибка в мобильном Safari, что делает его таким CSS фоновые изображения с общим разрешением больше, чем 2000000 пикселей не отображаться. A blog post from 2010 подробно изучает это. Насколько я знаю, он никогда не исправлялся. Чтобы получить фоновое изображение, вам нужно уменьшить его (с точки зрения общего количества пикселей) или разбить его на два или более спрайтов. Я определенно видел это раньше; единственное исправление заключалось в том, чтобы сделать изображения меньшими. Не в размере файла, в пикселях.

Answer 2

Смазливая сайт.

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

Мне нравятся идеи попробовать вещи со спрайтом, означая, что есть только один HTTP-запрос, но в этом случае нижняя часть вашего спрайта будет вызываться только при просмотре на мобильном устройстве. Возможно, стоит разбить его на настольный спрайт и мобильный спрайт, а затем загрузить их с соответствующими медиа-запросами.

Причина

Answer 3

Предел, кажется, отличается в разных случаях. Я тестирую устройство iPhone 4 с iOS 5.1.1, , а предел самого файла не так важен, как размер фона. Если я использую фон 1100px X 1000px, это не сработает. Но если я установил размер фона 1000px X 1000px, он будет работать.

Так что если я использую версию с высоким разрешением DPI (2x), 2000px X 2000px и задаю размер изображения до 1000px X 1000px, он все равно будет работать, хотя сам фон больше.

Поэтому рекомендуется использовать 1000px X 1000px для спрайта по умолчанию, , а затем вы можете иметь как минимум 2xDPI.Не пробовал 3 раза.