Зазор в 1 пиксель поступает только на iPad, но в Safari и Chrome

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

Он отлично подходит для всех других настольных браузеров.

enter image description here

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}

Ответы

Ответ 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:

Ответ 2

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

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

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

Ответ 3

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

Ответ 4

Попробуйте это

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

}

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

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

}

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

UPDATE:

Я думаю, что получил его,

remove #wrapper background-color;

remove #banner-switcher background:

Ответ 5

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

Ответ 6

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

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

.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/[email protected]');
    }
}

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

Ответ 7

Смешной beahviour, когда прозрачность выключена. Даже в jpg он показывает этот артефакт. Похож на ошибку в движке рендеринга webkit.

enter image description here