Тонкие серые / черные линии на веб-странице с iPad

Question

На нашем сайте iPad отображает тонкие серые / черные линии.Кажется, это какая-то форма масштабирования-артефакта на мобильном Safari.Ниже я предоставил два фрагмента страниц с измененной контрастностью, чтобы подчеркнуть проблему, к сожалению, из-за того, что дисплей iPad довольно хорош, эти строки довольно заметны.масштабируется и выглядит так, будто элементы div / изображения масштабируются с проблемами округления по краям, в результате чего краевой пиксель смешивается с черным.

Кто-нибудь нашел обходной путь или исправление для этого?

Спасибо

Answer 1

Я попробовал кучу исправлений, чтобы удалить эти серые крошечные линии, когда мобильное сафари было увеличено, и самое простое и наиболее гибкое исправление, которое я нашел, было здесь:

http://www.oddodesign.com/2010/css-tip-how-to-prevent-div-seam-lines-from-appearing-in-apples-mobile-safari/

По сути, вы добавляете

margin-bottom:-1px;

К элементам, которые получают границы фантомных линий.

Answer 2

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

Добавление 1 строки пикселов фонового цвета к изображению (или 1px отступ, если хотите), кажется, помогает. Не идеально, но работает.

Возможно, такая же проблема, как и Ошибка рендеринга границ в Safari Mobile в Safari Mobile в целом.

Answer 3

Если приведенные выше ответы не работают для вас, как они не для меня, есть еще одна вещь, которую вы, возможно, захотите попробовать, которая действительно решила мою проблему:

border-bottom: 1px transparent solid ;
margin-bottom: -1px ; /* for Mobile Safari dark line artifact */

Добавление границы, прозрачной границы снизу, похоже, помогло, я считаю, что он все еще пытается визуализировать границу, и хотя он прозрачный, он заставляет его повторно визуализировать эти пиксели. Это, однако, чисто догадка, но решение, кажется, работает!

Answer 4

У меня была сероватая линия (только для iPad) внизу панели заголовков, и я исправил ее с помощью:

position:relative;
z-index:2;

непосредственно добавлено в контейнер заголовка. возможно, это тоже может кому-то помочь.

Answer 5

Поскольку это вызвано цветом фона, просто используйте изображение размером 1px gif bg того же цвета фона и повторите его. Если вы используете modernizr, вы можете написать что-то вроде этого:

.touch .class-of-td { background: transparent url(../_img/services/1px-bgfix.gif) repeat; }

Это также работает для элементов, отображаемых в ячейках таблицы, для выравнивания по вертикали: по центру.

Answer 6

У нас была белая линия внизу полной страницы iframe в iPad, поэтому мы просто установили высоту на 100,5%, и это решило проблему.

Answer 7

У меня также была такая же проблема на моей домашней странице, и ни одно из этих решений не помогло мне. В моем конкретном случае это был фон, появляющийся между слоями div, как говорил Джонни наверху. В итоге я обернул существующие слои другим div и сделал цвет фона таким же, как у двух существующих слоев, а линии больше не были видны. Если ничего не работает, попробуйте.

Answer 8

В моем конкретном случае нарушающий div не будет исправлен с полем: -1px или граничными трюками.У меня был div с:

height: 0px; 
padding-bottom: 57.2%;

- это трюк для создания элемента, который сохраняет свои пропорции при различной ширине, потому что верх / низ отступа получает процент от ширины.В моем случае я смог исправить это, изменив это на:

height: 1px; 
padding-bottom: 57.2%;

ВАЖНО: стоит отметить, что я обнаружил, что обновление страницы-нарушителя, даже с измененными стилями, не удаляло строкудаже когда я спрятал тело *.Чтобы удалять строки каждый раз, когда они возвращались, мне приходилось перезагружать устройство.

• (body {display: none}, то есть не вмешиваться в доказательства)

Answer 9

У меня была такая же проблема с линиями 1px, появляющимися в настольных браузерах и на iPad и iPhone.

Вот мой старый css:

html,body {

background:url(images/bg.jpg);
height:100%;
    background-color:#E8E8E8;
text-align:center;
text-decoration:none;
width:auto;

}

Мой новый css:

html,body {

background:url(images/bg.jpg);
height:100%;
text-align:center;
text-decoration:none;
width:auto;

}

Удаление "background-color:" исправило эту проблему на всех моих сайтах.

Answer 10

Если <div> не тот же цвет, что и фон, и белый, это очень хорошо видно.
По сути, background-color в формате должен быть того же цвета, что и <div> в верхней части, или вы получите строку.
Чтобы обойти это проще, измените background-color на <div> или создайте плитку, которая будет покрывать области на заднем плане, где <div> сидит.