Фоновое изображение не отображается правильно в iOS

Я использую фоновое изображение на веб-сайте. Сайт отлично смотрится во всех настольных браузерах, но когда я просматриваю сайт на своем iPad Mini (под управлением iOS 6.1.3), фоновое изображение имеет полоски в нем. Вы можете увидеть шаблон на большинстве страниц, который является строкой (размером с фоновым изображением), которая выглядит хорошо, затем другая строка с тем же размером фонового изображения и т. Д.

Вот скриншот, показывающий проблемы:

Скриншот

Вот CSS, необходимый для фона:

#wrap { margin:0 auto; position:relative; padding:0; background: #B3B1B2 url(/images/bgs/parchment2.jpg); } 

Я попытался очистить кеш iPad, но это не сработало. Я в недоумении, почему это происходит. Как предотвратить и решить эту проблему?

Обновить

Я создал jsFiddle обертки. Это выглядело хорошо на веб-сайте. Поэтому мне остается предположить, что это где-то в моем коде. Однако это не всегда происходит сразу на сайте. Это может произойти с Fiddle, но я этого не видел. Если это мой сайт, как я могу отслеживать код, вызывающий проблему?

Обновление 2

Я изменил фоновое изображение на теги html, body и проблема все еще происходит, но не так плоха и будет очищена сама. Мне все еще остается интересно, как я все это предотвращаю.

Обновление 3

Я пробовал идею @ Riskbreaker переключиться на PNG. Это не сработало. Я все еще вижу линии. Он также значительно увеличил фоновый файл (от 30 тыс. До почти 200 тыс.). Я также попробовал совершенно другое фоновое изображение, думая, что это может быть сам образ, но я все еще видел ошибку. Я переключился на jpg для соображений размера файла.

Как решить эту проблему? Это проблема iOS или что-то в моем коде?

Этот сайт является http://www.lfrieling.com/ . Я вижу это только на моем iPad Mini, работающем под управлением iOS 6.1.3 (последний на момент написания этой статьи). Я не вижу этого на моем iPhone, работающем на той же версии iOS. Также вы видите это на длинных страницах больше, чем на других страницах. См. Раздел «Профессиональные ресурсы».

Вы пробовали аппаратное ускорение? Добавить -webkit-transform: translateZ(0); к тому же css, что и добавление фона. Это мое предположение, потому что это проблема рендеринга, а аппаратное ускорение устраняет проблемы с рендерингом при использовании css-переходов в Chrome.

 #wrap { margin:0 auto; position:relative; padding:0; background: #B3B1B2 url(/images/bgs/parchment2.jpg); -webkit-transform: translateZ(0); } 

Или, может быть, попробуйте отображать изображения сетчатки для устройств, которые поддерживают их, используя медиа-запросы?

 @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { #wrap { background: #B3B1B2 url(/images/bgs/parchment2_2x.jpg); } } 

Источник медиа-запросов *

Чтобы решить проблемы с рендерингом, вы можете попробовать добавить -webkit-transform: translateZ(0); к другим тегам, которые также обертывают содержимое на странице. Это может предотвратить проблемы с загрузкой / рендерингом.

Lynda Прежде всего это хороший сайт. Во-вторых, вы должны принять во внимание эти два совета:

  1. Правило @media

    и писать правила файла CSS для каждого устройства (здесь есть список медийных )

  2. Проверьте свой веб-сайт на любой размер экрана, включая настольные компьютеры, планшеты, телевизоры и мобильные телефоны.

Это все, что я думаю, что помогла тебе.

Попробуйте добавить в -webkit-background-size :

 body { -webkit-background-size: 512px 512px; } 

Попробуйте это, это может вам помочь. Добавить overflow: hidden; height: 1%; overflow: hidden; height: 1%; к вашему #wrap .

Вы пробовали использовать background: #B3B1B2 url(/images/bgs/parchment2.jpg) repeat; , Не уверен, что это решит проблему, и у меня нет iPad для тестирования, но это стоит попробовать.

Попробуйте, если это поможет,

после добавления repeat к #wrap ,

и добавить overflow:auto; to .height

так как размер изображения равен 512×512, а высота – 2000.

обновленная скрипка

Я не уверен, что это сработает, но проблема заключается в том, пока внутреннее изображение не сможет правильно отобразить фон,

FYI: -webkit-transform: использует gpu, поэтому, если устройство не поддерживается gpu, тогда вы столкнетесь с проблемой ..

Надеюсь, это будет ..

  • NSCountedSet - получить количество элементов в наборе
  • Стирание после рисования с помощью CGContext
  • Почему инструкция UPDATE работает с initWithFormat и NOT с помощью stringWithFormat?
  • Как загружать фотографии из фотогалереи и хранить ее в проекте приложения?
  • Как проверить ориентацию устройства программно в iPhone?
  • iPad: Как узнать, нажата ли клавиша возврата iPad? Пожалуйста, проверьте изображение
  • Xcode 6 iPair Air не может запускать приложение на устройстве (версия ОС)
  • проверьте, выбран ли UIButton
  • Не сжимайте UISplitViewController в горизонтально компактной среде
  • UIWebView - не изменяет размер содержимого при изменении поворота?
  • У iPad Safari есть проблемы с рендерингом jpg в качестве фонового изображения?
  • Interesting Posts

    Sprite Kit – добавьте случайные узлы Sprite в сцену с корпусом переключателя

    Вертикально выравнивать текст внутри UILabel (Примечание: использование AutoLayout)

    Добавление разрывов строк при отображении длинной строки в UIWebView

    Включить библиотеку не ARC в приложение ARC?

    Размер UIView и раскадровки

    XCode iO6: UIWebView возвращает черный экран после возврата от выбора фотографии

    Как вы отпустите MTAudioProcessingTap?

    Анимированный GIF не работает на iPhone

    Ошибка при установке Swift Open Source Xcode Toolchain: вы не можете установить Swift Open Source Xcode Toolchain в этом месте

    Как разрешить «Ошибка загрузки кадров» в UIWebView?

    IOS self-> isa устарел, но Object_setClass также дает предупреждение

    Cocoapods framework не может найти файл в другой структуре cocoapods

    Проверить версию iOS> = 4.2 и пересмотреть CSS на основе результата

    Собственные утечки памяти в iOS или MonoTouch?

    Самый эффективный способ изменения содержимого CMSampleBuffer

    Давайте будем гением компьютера.