Одиночный/подпиксельный рассогласование divs на ipad и iphone safari

Ответ 1

У меня была аналогичная проблема в недавнем проекте, где у меня были фоновые маски для изображений с различным цветом фона, чтобы раскрасить полученные значки в мобильном Safari. Проблема заключалась в том, что когда страница была уменьшена с помощью Safari, на изображении была выделена линия цвета фона, хотя она должна была маскироваться. Я никогда не нашел способ предотвратить утечку цвета фона при уменьшении страницы. Это явно ошибка в мобильных алгоритмах Safari, которые пересчитывают фон и маску. Я нашел обходное решение: я начертил элемент элемента с тем же цветом, что и фон родительского элемента. Контур находится за пределами элемента и, следовательно, маскирует часть, истекающую кровью. Если ваш родитель элемента имеет динамический фон, это не будет работать так хорошо, но если он будет сплошным цветом, все будет хорошо.

Ответ 2

Отрицательный запас - это единственный способ предотвратить это.

Например, если у вас слабый горизонтальный зазор между двумя div, добавление верхнего поля -1px во второй div сделает его слегка перекрывать, и пробел не будет отображаться при масштабировании страницы.

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

Ответ 3

Проблема заключается не только в совпадении divs, но и с спрайтами изображений.

Я следил за советом в этой теме, устанавливая начальную шкалу видового экрана в 1.0. Ошибка субпикселя исчезла, но затем я протестировал свой сайт на других устройствах, таких как Android, и понял, что страница полного размера раздражает, так как пользователи должны повторно масштабировать каждый раз, когда загружаются. Поэтому я предпочел отключить весы и ждать, пока Apple ее исправит. Тогда однажды я подумал, как решить проблему с краями страницы, и я пришел к этому простому решению в CSS:

html {
  min-width: 1024px;
}

Устройства, способные к этому разрешению, такие как iPad в горизонтальном положении, установят масштаб документа в 1,0. В моем случае это достаточно решение, так как я могу показать, что страница работает правильно, а ошибка субпикселя находится в Safari/iOS, которая, как мы надеемся, будет решена в будущем.

Ответ 4

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

/*
 * Prevent faint lines between elements.
 * @link http://stackoverflow.com/questions/5832869
 */
box-shadow: 0 1px 0 red;

Ответ 5

Любые идеи?

Если вы только просите идеи, у меня есть несколько. Если вы просите разрешения, я не думаю, что он есть.

Я вижу то же самое с моими сайтами. Проблема уходит, когда вы увеличиваете масштаб. Я считаю, что это просто проблема с тем, как Mobile Safari отображает уменьшенные div и изображения, и я действительно не верю в то, что мы можем с этим поделать.

Скажем, ваш сайт/дизайн имеет ширину 900 пикселей. У вас есть div 900 px в строке # 1 над тремя divs в строке # 2, каждый из которых шириной 300 пикселей. Масштабируемый на 100% на настольном ПК, все выглядит идеально. Однако для iOS сайт масштабируется до 320 пикселей в ширину. Размер файла 900 px делится на 64,44%. Теперь, когда вы масштабируете каждый из 300 пикселей div на 64.44%, вы получаете 106.68 пикселей каждый. У вас не может быть доли пикселя, поэтому пусть они округляются до 107 пикселей каждый. Три из этих divs подряд составляют 321 пиксель; или на 1 пиксель больше, чем больше div над ними.

Мое объяснение - грубое упрощение, поскольку масштабирование, кажется, уменьшает или устраняет проблему, даже если у вас все еще меньше отношения от 1 до 1 пикселя. Я предполагаю, что любой алгоритм iOS, исправляющий ошибки округления, просто улучшает работу с ним, когда общее изображение приближается к фактическому размеру (увеличено).

EDIT:

Я вижу эту проблему с шириной div шириной 900 px (авто-высота), содержащей Y-повторяющийся фоновый срез 900 px в ширину над другим div (фиксированная высота), содержащий фоновое изображение шириной 900 px. Мое объяснение ошибок округления, похоже, прямо не учитывает это наблюдение, хотя я по-прежнему считаю, что алгоритмы масштабирования iOS являются виной.

Ответ 6

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

Ответ 7

Я бы попробовал играть с параметрами meta/viewport, в частности, установить начальную шкалу в 1.0 и отключить масштабирование пользователей.

http://developer.apple.com/library/safari/ipad/#documentation/appleapplications/reference/SafariHTMLRef/Articles/MetaTags.html

Ответ 8

Удалите "clear: both" (если есть) из div ниже промежутка.

Ответ 9

Мне также пришлось это решить. Если вы используете Div для определения разделов только тогда.

//background.css
.background-color {
  background-color: blue;
}
.background-color div {
  background-color: inherit;
}