it-swarm.com.ru

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

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

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

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

Есть идеи?

27
Dave

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

21
Robert

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

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

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

4
Eric

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

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

html {
  min-width: 1024px;
}

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

3
marcoantap

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

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

Есть идеи?

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

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

1
Sparky

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

1
Chris Kelly

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

0
Parrot

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

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

0
TomSwift

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

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