Таинственные горизонтальные линии на моем сайте при рендеринге на iPad

Question

Следующий сайт:

http://staging.jungledragon.com

Имеет несколько проблем с рендерингом на iPad с использованием Safari, поэтому я пытаюсь их исправить. Есть одна проблема, где я застрял. Если у вас есть iPad, откройте сайт в портретном режиме. Появляются две нежелательные горизонтальные линии: верхняя, пересекающая вкладки («Популярная», «Свежая» и т. Д.), И нижняя, расположенная прямо над иллюстрацией ящерицы. Обе строки не должны быть там.

Эти строки не отображаются ни в одном другом протестированном браузере, включая Safari в Windows. Когда вы перемещаете этот же сайт в альбомный режим на iPad, верхняя горизонтальная линия исчезает, а нижняя остается. Если вы немного увеличите нижний предел, он тоже исчезнет.

Я пробовал различные CSS-исправления, но безрезультатно, и сейчас начинаю думать, что это проблема рендеринга Safari, хотя, возможно, я и вызвал ее.

Любая помощь с благодарностью. Это кажется незначительной проблемой, но я ненавижу разгильдяйство.

Answer 1

Проблема связана с тем, как Mobile Safari обрабатывает фоновые изображения.Зеленая линия, которая всплывает (прямо внутри вашей области контента), принадлежит другому элементу.

Попробуйте «увеличить размеры» ваших изображений.Например: изображение обрезается на высоте 100 пикселей, сделайте это изображение высотой 110 пикселей.Это работает для меня ... большую часть времени.

Редактировать: я проверил сайт на своем iPad, и я только что увидел, что эта единственная строка выскакивает.Также обратите внимание, что он исчезает, когда вы увеличиваете / уменьшаете масштаб, который говорит мне, что это ошибка рендеринга (а не что-то в вашем CSS).

Answer 2

Упс - как это произошло?

Мета, которую нужно добавить в теге head, чтобы остановить масштабирование на iPad:

<meta name="viewport" content="initial-scale=1, maximum-scale=1">

Answer 3

Альтернативой является указание размера фона. Это можно сделать с помощью селектора css "background-size".

Если фоновое изображение имеет высоту 40 пикселей, следующий код предотвратит появление горизонтальных линий на iPad: {background-size: 100% 40px}

Answer 4

Увеличение размера фоновых изображений вручную или с использованием CSS3 должно работать почти всегда, как указали Дэмиен и Намсрал.

Однако иногда это не решит проблему в тех случаях, когда фоновое изображение привязано к определенной позиции.Например, если ваше фоновое изображение привязано к нижней части вашего div, и линия появляется в нижней части этого div, то вам следует сместить фоновое изображение ниже [нижнего] на определенную величину, в зависимости от высотываш див.Например:

background-postion: центр 100.1%;

Answer 5

Существует span или div без содержимого.

Пожалуйста, дайте disply:none; этому div или span и посмотрите результат.

Answer 6

ура, у меня было то же самое, но на Andriods и с использованием background-image: 100% 460px; помог решить мой :))

Answer 7

Фоновое изображение, которое я использовал, останавливается на середине раздела содержимого, а затем должен отображаться фон элемента контейнера.

Поскольку iPad увеличивает масштаб изображения, соответствующий фон, примененный к тегу html, не отображается. Похоже, iPad не нравится, когда не задан запасной цвет фона, поэтому мне пришлось добавить CSS для iPad, используя медиазапрос:

html { background:#ffffff url("images/bg-html.png") center top repeat-x; }
html#inside-html { background:#ffffff url("images/inside-bg-html.png") center top repeat-x; }

body { 
    background:transparent url("images/bg-body.jpg") center top no-repeat;
    text-align:center; 
    font:12px Helvetica, Arial, Verdana, sans-serif;
    line-height: 20px;
    color:#000;
    min-width: 980px;
}

body#inside { background: transparent url("images/inside-bg-body.jpg") center top no-repeat; }

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
    body {
        background: #fff url("images/bg-body.jpg") center top no-repeat;
    }

    body#inside {
        background: #fff url("images/inside-bg-body.jpg") center top no-repeat;
    }
}

Answer 8

Многие из этих проблем с «пробелами на iPad» можно устранить, полностью отключив масштабирование на iPad, используя этот метатег, например, в Facebook:

<meta name="viewport" content="initial-scale=1, maximum-scale=1">

Это предотвращает масштабирование на iPad,но это полностью устранило мою проблему с "пробелами".

Answer 9

Вы пробовали сброс css? Если не попытаться добавить его, это может быть чем-то стандартным для мобильных устройств, чтобы увидеть, если оно все еще существует, если он проверит его в firebug, чтобы точно узнать, что это такое