Линейные артефакты в мобильном Safari - PullRequest
Новая
       11

Линейные артефакты в мобильном Safari

6 голосов
/ 11 октября 2010

Safari отображает черные линии между элементами на моем веб-сайте в некоторых масштабах. Это особенно плохо, когда он разбивает изображение, которое разбивается на два разных элемента для кнопки или чего-то еще. Я не могу поместить BG в родительский элемент двух div, потому что они прозрачные .pngs. Любое решение или просто иметь дело с ним?

захват проблемы, http://i.stack.imgur.com/pTLki.png

У TravisO также есть та же проблема, и я изменил способ разметки страницы, изначально это была простая таблица с 5 строками, я удалил строки и просто пошел с изображениями, и br, все еще происходит. Я пытался удалить все отступы и поля с помощью CSS, но было совершенно очевидно, что проблема заключается не в рендеринге браузера, а в том, что браузер изменяет выборку, чтобы преобразовать страницу в размер, соответствующий размеру экрана. Вы можете увидеть мою сломанную страницу по адресу:

http://www.apinkdoor.com/show/

Ответы [ 6 ]

2 голосов
/ 18 августа 2011

Эта проблема является результатом ошибки округления, возникающей в мобильном сафари, когда он изменяет масштаб фоновых изображений для отображения (это ошибка: http://openradar.appspot.com/8684766).

Решение состоит в том, чтобы увеличить ширину края правой кнопкина левой стороне на 1 или 2 пикселя. Затем отрегулируйте CSS соответствующим образом, чтобы добавленные пиксели размером 1 или 2 не отображались по умолчанию.

2 голосов
/ 25 января 2011

TravisO, вы должны избавиться от стиля img в вашем css!Если вы используете только это: 

<style type="text/css">
*
{
    margin: 0px;
    padding: 0px;
}

body
{
    background-color: #f00;
    text-align: center;
}
</style>

, он должен правильно отображаться на вашем iPhone!

1 голос
/ 10 июня 2011

Следующий CSS, добавленный к проблемному div с заданным background-image, это то, что исправило это для меня. Все, что меньше 3px, все равно будет показывать легкие артефакты при некоторых уровнях масштабирования Safari. 

margin-top: -3px; /* for Mobile Safari dark line artifact */
padding-top: 3px; /* for Mobile Safari dark line artifact */
0 голосов
/ 04 марта 2014

У меня была похожая проблема при отображении .png-изображения в теге div.Тонкая (я думаю, 1 пиксель) черная линия была нарисована сбоку изображения.Чтобы это исправить, мне пришлось добавить следующий стиль CSS: box-shadow: none;

0 голосов
/ 14 февраля 2014

Добавление значения initial-scale к метатегу области просмотра решило эту проблему для меня.

<meta name="viewport" content="initial-scale=1.0">

0 голосов
/ 14 января 2014

Я обнаружил, что изменение цвета фона элемента с «серой рамкой» вокруг меня сработало.

...