Тонкие серые / черные линии на веб-странице с iPad
Мы обнаружили, что iPad отображает тонкие серые / черные линии на нашем сайте. Кажется, это какая-то форма масштабирования-артефакта на мобильном Safari. Ниже я предоставил два фрагмента страниц с измененной контрастностью, чтобы подчеркнуть проблему, к сожалению, из-за того, что дисплей iPad довольно хорош, эти строки довольно заметны.
Похоже, они приходят и уходят, когда страница масштабируется, и выглядят так, будто элементы div / изображения масштабируются с проблемами округления по краям, в результате чего краевой пиксель смешивается с черным.
Кто-нибудь нашел обходной путь или исправить это?
Спасибо
12 ответов
Я попробовал кучу исправлений, чтобы убрать эти серые крошечные линии при увеличении mobile-safari, и самое простое и гибкое исправление, которое я нашел, было здесь:
По сути, вы добавляете
margin-bottom:-1px;
К элементам, которые получают границы фантомных линий.
Похоже, что масштабирование iOS берет некоторые данные из следующей строки изображения (возможно, ошибка округления при интерполяции?). Я сделал несколько тестов, и это кажется постоянной проблемой. Я сообщил об этом как об ошибке в Apple.
Кажется, что добавление 1 строки пикселей цвета фона к изображению (или 1px отступа, если хотите) поможет. Не идеально, но работает.
Возможно, такая же проблема, как и ошибка рендеринга границ в Safari Mobile на Safari Mobile в целом.
Если приведенные выше ответы не работают для вас, как они не для меня, есть еще одна вещь, которую вы можете попробовать, что решило мою проблему:
border-bottom: 1px transparent solid ;
margin-bottom: -1px ; /* for Mobile Safari dark line artifact */
Добавление границы, прозрачной границы снизу, казалось, помогло, я рассуждаю так: она все еще пытается отобразить границу, и хотя она прозрачна, она заставляет ее повторно визуализировать эти пиксели. Это, однако, чисто догадка, но решение, кажется, работает!
Так как это вызвано цветом фона, просто используйте изображение размером 1px gif bg того же цвета фона и повторите его. Если вы используете modernizr, вы можете написать что-то вроде этого:
.touch .class-of-td {
background: transparent url(../_img/services/1px-bgfix.gif) repeat;
}
Это также работает для элементов, которые отображаются в ячейке таблицы, чтобы получить вертикальное выравнивание: середина.
У меня была сероватая линия (только для iPad) в нижней части панели заголовков, и я исправил ее:
position:relative;
z-index:2;
непосредственно добавляется в заголовок контейнера. возможно, это тоже может кому-то помочь.
У меня была такая же проблема с линиями 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:" исправило эту проблему на всех моих сайтах.
Если <div> не тот же цвет, что и фон, и белый, это очень хорошо видно.
В основном, background-color в формате должен быть того же цвета, что и <div> сидя на вершине или вы получите линию.
Легкая работа - изменить background-color чтобы соответствовать <div> или сделать плитку, которая будет покрывать области на заднем плане, где <div> сидеть.
Добавление этого к блоку над линией работало для меня очень хорошо.
margin-top:-1px; /* this overlap the blamed ghost line */
padding-top:1px; /* this gave me my pixel back =) */
если это происходит с вами в слишком большом количестве блоков, вы должны вместо этого создать класс.
Если вы используете прозрачный div с относительной позицией, то margin-bottom: -1px не будет работать. В этом случае вы можете использовать ответ @Leonard :
border-bottom: 1px transparent solid ;
margin-bottom: -1px ; /* for Mobile Safari dark line artifact */
Это удобно при использовании прокрутки параллакса и позиционировании относительных элементов div, содержащих текст.
У нас была белая линия внизу полной страницы iframe в iPad, поэтому мы просто установили высоту на 100,5%, и это решило проблему.
У меня также была такая же проблема на моей домашней странице, и ни одно из этих решений не помогло мне. В моем конкретном случае это был фон, появляющийся между слоями div, как говорил Джонни наверху. В итоге я обернул существующие слои другим div и сделал цвет фона таким же, как у двух существующих слоев, а линии больше не были видны. Если ничего не работает, попробуйте.
В моем конкретном случае нарушающий div не будет исправлен с полем:-1px или граничными трюками. У меня был div с:
height: 0px;
padding-bottom: 57.2%;
- это трюк для создания элемента, который сохраняет свои пропорции при разной ширине, потому что верх / низ отступа получает процент от ширины. В моем случае я смог это исправить, изменив это на:
height: 1px;
padding-bottom: 57.2%;
ВАЖНО: стоит отметить, что я обнаружил, что обновление страницы-нарушителя, даже с измененными стилями, не удаляло строку, даже когда я скрывал тело *. Чтобы удалить линии каждый раз, когда они возвращались, мне пришлось перезагрузить устройство.
- (body {display: none}, то есть не вмешивается в доказательства)