Разрыв в 1 пиксель только на iPad, но в Safari и Chrome - отлично

Question

Здесь, в этой строке после облаков , которые будут видны только в iPad или iPhone .Любая идея, как решить это?

Это нормально во всех других настольных браузерах.

CSS

#banner-inner { height: 270px;     margin: 0 auto;    position: relative;    width: 954px;}

.cloud-bottom { position: absolute; background: url(images/clouds_dark.png) repeat-x 0 bottom ; z-index: 1; width:100%;height:111px;bottom:0}

.cloud-top { position: absolute; background: url(images/clouds_light.png) repeat-x 0 bottom ; z-index: 4;width:100%;height:111px;bottom:0}

Answer 1

Это, похоже, ошибка движка рендеринга WebKit на iPad, когда коэффициент масштабирования страницы меньше 1,0.Если вы сохраняете коэффициент масштабирования страницы выше 1,0, то разрыв в пикселях не отображается.Это можно сделать с помощью метатега:

<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, width=device-width">

Я также обнаружил простую страницу, которая демонстрирует аналогичную проблему (ошибка рендеринга только на iPad):

• Ошибка округления с ширинами

В прошлом сообщалось о нескольких ошибках, связанных с проблемами округления в движке WebKit:

• Ошибка WebKit# 5531
• Ошибка WebKit # 14956
• Ошибка WebKit # 18013

Answer 2

Я также решил проблему разрыва субпикселя в iOS (на полноэкранном сайте), используя overflow-x: hidden;чтобы остановить боковую прокрутку и масштаб точки обзора, чтобы остановить масштабирование высоты тона.У меня также был набор держателей div на ширине: 101%;и все элементы / элементы div внутри set установлены на float: left ;.Это означает, что все подпиксельные промежутки находятся на левой стороне, но выталкиваются из поля зрения держателем div, установленным на ширину 101%.

Answer 3

Если отключение масштабирования нежелательно и если трюк с полями не работает (возможно, он работает с цветами фона, но я не смог заставить его работать с фоновыми изображениями), вот другое решение:

Сделайте все фоновые изображения на 1 или 2 пикселя больше (обрежьте их так, чтобы они содержали дубликат 1 пикселя над изображением выше / ниже) и используйте css background-size и background-position, чтобы гарантировать, что дополнительный (нежелательный) пиксель не отображается -тогда он будет использоваться только в том случае, если браузеру понадобится этот дополнительный пиксель для покрытия разрыва рендеринга.

Протестировано для исправления ошибки рендеринга в стандартном браузере Android 2.3 (в понедельник будет тестироваться на iPhone и iPad), плюсошибки масштабирования в Chrome на ПК.

Answer 4

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

Для меня отлично подойдет следующий трюк:

.your-thing {
    background-repeat: no-repeat;
    background-image: url('img/your-background.png');
    background-size: 400px; /* width of "your-background.png" */
}

@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min--moz-device-pixel-ratio: 2) {
    .your-thing {
        /* override with version which is exactly 2x larger */
        background-image: url('img/your-background@2x.png');
    }
}

В моем случае вышеприведенное решение отлично сработало.

Answer 5

Попробуйте установить высоту #banner в PX, а не в EM И высота облаков составляет 112 на 113 пикселей, а не на 111 пикселей для обоих.

Answer 6

Забавное поведение, когда прозрачность отключена. Даже когда JPG показывает этот артефакт. Похоже, ошибка в движке рендеринга webkit.

Answer 7

Попробуйте

#wrapper {
     margin: -2px auto;
... rest of your css....

}

. Возможно, проблема с небольшим разрешением, попробуйте также

#wrapper {
    background-color: #fff;
... rest of your css....

}

, один из них должен работать:)

ОБНОВЛЕНИЕ:

Я думаю, я понял,

remove #wrapper background-color;

remove #banner-switcher background: