Одиночное / субпиксельное смещение элементов div на ipad и iphone safari

Question

У меня следующая ситуация, и мне нужна помощь ...

1. Два элемента одинакового размера, в одном месте, один поверх другого
2. Все работает как положено в настольных браузерах
3. На iphone / ipad появляется слабая линия вокруг границы divs
4. Эта слабая линия не всегда на всех четырех границах. Это изменяется в зависимости от местоположения divs. Похоже, что это происходит из-за того, что два элемента div не выстраиваются должным образом, но в соответствии с настройками стиля они имеют одинаковый размер и расположение.

Вы можете увидеть результаты здесь: http://www.thoughtartistry.com

Есть идеи?

Answer 1

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

Answer 2

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

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

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

Answer 3

Проблема не только в сопоставлении элементов div, но и в спрайтах изображений.

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

html {
  min-width: 1024px;
}

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

Answer 4

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

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

Answer 5

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

Answer 6

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

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

Answer 7

Удалите «clear: both» (если есть) из div ниже пробела.

Answer 8

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

https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html