Сафари округляется по подспикальным вычислениям

У меня есть контейнер, который занимает 829px в строке и имеет фоновое изображение того же размера.

У меня есть div внутри этого контейнера, который вычисляет его ширину на основе контейнера 829px. на сафари ширина divs получается примерно как 173.8px, но поскольку сафари /webkit округляются вниз, его усекается и становится 173px в ширину.

этот контейнер 829px имеет 3 divs inline в одной строке. первый div, 1px потерян, второй, 2px потерян, а третий, 3 пикселя потеряны, поэтому третий div сдвинут налево на три пикселя. на ipad, то есть потеряно 6 пикселей.

Я попытался найти проблемы с подпиксельным рендерингом, и я прочитал статью john resigs и некоторые другие вопросы SO, но я не смог найти решение.

в google, я нашел статью: http://www.pixafy.com/blog/2013/05/css-subpixel-rendering/#more-310 я попытался применить его к моей ситуации, но я не могу уйти, не устанавливая ширину, рассчитанную на контейнеры 829px.

что я могу сделать?

Ответ 1

Не так много, что вы можете сделать о том, как разные браузеры делают субпиксели, к сожалению. Было бы здорово, если бы мы могли выбрать, как округление должно обрабатываться с помощью CSS, но нет.

Просто используя пиксели, а затем проценты разрешат проблему, но это явно не то, что вы хотите. Я думаю, вы можете обойтись со статическими пикселями, если вы измените значения (возможно на процентное значение) через медиа-запросы.

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

Ответ 2

В эти дни вы можете использовать flexbox (чистый CSS), чтобы справиться с этим.

От источника, указанного выше:

Основная идея гибкой компоновки - предоставить контейнеру возможность изменять ширину/высоту (и порядок) своих элементов, чтобы наилучшим образом заполнить доступное пространство (в основном для размещения всех видов устройств отображения и размеров экрана). Гибкий контейнер расширяет элементы для заполнения свободного места или сжимает их, чтобы предотвратить переполнение.

Ответ 3

Я столкнулся с подобной проблемой, и я написал о том, как я ее решил здесь: http://maxlapides.com/fixing-subpixel-layout-rendering-in-safari/

В принципе, я придумал какой-то JavaScript, который пересчитывает ширину элементов, чтобы они охватывали всю ширину контейнера.

Ответ 4

Недавно я столкнулся с этой проблемой, используя платформу Bootstrap. После траления в сети я нашел эту ссылку http://cruft.io/posts/percentage-calculations-in-ie/ и провел некоторое тестирование устройства. Кажется, что iOS7 Safari округляется до ближайшего целого числа, в то время как iOS8 (который по умолчанию имеет подпиксельную визуализацию), кажется, округляется до максимума. из 15 знаков после запятой. Это также похоже на OSX 10.10 (Yosemite)

Как Нильс К упоминает в своем ответе, либо используйте макет ширины пикселя, либо попытайтесь адаптировать макет, чтобы убедиться, что он достаточно широкий/узкий, чтобы вместить весь пиксель в пространство.

Ответ 5

Если вы не можете сделать float: right на последнем элементе в строке, из-за того, что отображаются цвета фона и т.д., вы можете использовать следующий трюк, чтобы действительно скрыть фон (обратите внимание на код SASS):

.safari .parent_element { // CHANGE
  position: relative;

  &:after {
    content: ''
    position: absolute;
    height: 100%;
    width: 3px;
    top: 0;
    left: calc(100% - 2px); // Or sometimes 'right: 2px;' will work
    background-color: $pageBackground; // Change
  }
}

Класс сафари добавляется к <html> с помощью теста Modernizr:

Modernizr.addTest('safari', function() {
  var uagent = navigator.userAgent.toLowerCase();

  return /safari/.test(uagent) && !/chrome/.test(uagent);
});

Единственная причина, по которой я когда-либо использовал этот тест, - это преодоление субпиксельной рендеринга Safari с использованием градиента фона между элементами сетки, имеющими процентную ширину. Я не сторонник широко распространенного использования! Тем не менее, это является последним средством защиты.

Ответ 6

Если это происходит по отношению к ползунку, где у вас есть нечетный набор изображений (например, 3 вертикальных слайдера), один незначительный взлом - это увеличение ширины средних изображений до 101%.

.middle-slider img { width: 101%; }

Когда дело доходит до этого неправильного обращения с помощью браузеров, это всего лишь одно приемлемое решение в куче хаков и, конечно же, достаточно для большинства случаев использования.