Одиночное / субпиксельное смещение элементов div на ipad и iphone safari
У меня следующая ситуация, и мне нужна помощь...
- Два div, одинакового размера, в одном месте, один поверх другого
- Все работает как положено в настольных браузерах
- На iphone/ipad появляется слабая линия вокруг границы div
- Эта слабая линия не всегда на всех четырех границах. Это изменяется в зависимости от местоположения divs. Похоже, что это происходит из-за того, что два элемента div не выстраиваются должным образом, но в соответствии с их настройками стиля они имеют одинаковый размер и расположение.
Вы можете увидеть результаты здесь: http://www.thoughtartistry.com/
Есть идеи?
9 ответов
У меня была похожая проблема в недавнем проекте, где у меня были маски фонового изображения с другим цветом фона, чтобы раскрасить получившиеся значки в мобильном Safari. Проблема заключалась в том, что когда Safari уменьшала размер страницы, вокруг изображения появлялась линия цвета фона, хотя она должна была быть замаскирована. Я никогда не находил способ предотвратить утечку цвета фона при уменьшении страницы. Это явная ошибка в алгоритмах мобильного Safari, которые пересчитывают фон и маску. Я нашел обходной путь: я наложил контур на элемент того же цвета, что и фон родительского элемента. Контур находится за пределами элемента и, следовательно, маскирует часть, истекающую кровью. Если родитель вашего элемента имеет фоновый узор, который является радикальным, это не будет работать так хорошо, но если это сплошной цвет, то все будет хорошо.
Отрицательная маржа - это единственный способ предотвратить это.
Например, если у вас слабый горизонтальный промежуток между 2 делениями, добавление верхнего поля -1px ко второму делению приведет к тому, что он будет слегка перекрываться, и этот пробел не появится снова при масштабировании страницы.
В некоторых ситуациях (например, спрайты изображений или повторяющиеся шаблоны) может потребоваться немного доработать, но общая идея та же. Для спрайта убедитесь, что нет большого изменения цвета в пределах 1 пикселя от границы обрезки. Кровотечение никогда не превышает 1 пикселя, поэтому достаточно корректировки в 1 пиксель.
Проблема не только в том, что div'ы совпадают, но и в спрайтах изображений.
Я последовал совету в этой теме, чтобы установить начальный масштаб области просмотра на 1.0. Ошибка субпикселя исчезла, но затем я протестировал свой веб-сайт на других устройствах, таких как Android, и понял, что полноразмерная страница раздражает, поскольку пользователям приходится масштабировать каждый раз, когда она загружается. Поэтому я предпочел отключить весы и подождать, пока Apple исправит это. Затем однажды я подумал, как решить проблему с полями страницы, и пришел к этому простому решению в CSS:
html {
min-width: 1024px;
}
Устройства с таким разрешением, такие как iPad в горизонтальном положении, установят масштаб документа на 1,0. В моем случае этого решения достаточно, так как я могу показать, что страница работает правильно, а ошибка субпикселя в Safari/iOS, которая будет исправлена в будущем.
Это полностью зависит от ситуации, но в нашем случае мы используем отрицательные поля, предложенные этим потоком или тенью outline распространяется только на все границы и т. д. outline-bottom не существует.
/*
* Prevent faint lines between elements.
* @link http://stackru.com/questions/5832869
*/
box-shadow: 0 1px 0 red;
Есть идеи?
Если вы только просите идеи, у меня есть несколько. Если вы просите о решении, я не верю, что оно есть.
Я вижу то же самое с моими сайтами. Проблема исчезает, когда вы увеличиваете масштаб. Я считаю, что это просто проблема с тем, как Mobile Safari отображает уменьшенные элементы div и изображения, и я действительно не верю, что с этим можно что-то сделать.
Допустим, ваш сайт / дизайн имеет ширину 900 пикселей. У вас есть div шириной 900 px в строке #1 выше трех div в строке #2, каждая шириной 300 px. Масштабируется на 100% на настольном ПК, все выглядит идеально. Однако для iOS сайт уменьшен до 320 пикселей в ширину. Div 900 пикселей уменьшен на 64,44%. Теперь, когда вы масштабируете каждое из делений 300 пикселей на 64,44%, вы получаете 106,68 пикселей каждый. Вы не можете иметь долю пикселя, поэтому предположим, что они округляются до 107 пикселей каждый. Три из этих элементов в строке составляют 321 пиксель; или на 1 пиксель больше, чем большее деление над ними.
Мое объяснение - это чрезмерное упрощение, так как увеличение, кажется, уменьшает или устраняет проблему, даже если у вас все еще менее 1 - 1 пиксель. Я предполагаю, что любой алгоритм iOS, исправляющий ошибки округления, просто лучше работает с ним, когда общее изображение ближе к реальному размеру (больше увеличено).
РЕДАКТИРОВАТЬ:
Я вижу эту проблему с div шириной 900 px (авто-высота), содержащим Y-повторяющийся фоновый срез шириной 900 px над другим div (фиксированная высота), содержащим фоновое изображение шириной 900 px. Мое объяснение ошибок округления, кажется, не объясняет это наблюдение, хотя я все еще верю, что виноваты алгоритмы масштабирования iOS.
Я также решил проблему разрыва субпикселя в iOS (на полноэкранном сайте) с помощью overflow-x: hidden; чтобы остановить боковую прокрутку и масштаб точки обзора, чтобы остановить масштабирование высоты тона. У меня также был набор держателей div на ширине: 101%; и все элементы / элементы div внутри него установлены на float: left;. Это означает, что все подпиксельные промежутки находятся на левой стороне, но выталкиваются из поля зрения держателем div, установленным на ширину 101%.
Я также должен был решить это. Если вы используете Div для определения разделов только тогда.
//background.css
.background-color {
background-color: blue;
}
.background-color div {
background-color: inherit;
}
Я бы попробовал поиграть с параметрами meta/viewport, в частности, установив начальный масштаб на 1.0 и отключив пользовательское масштабирование.