Safari округляет вычисления субпикселей в меньшую сторону

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

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

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

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

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

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


layout css responsive-design percentage subpixel
person Masu    schedule 30.05.2013    source источник
comment
Используйте 33,333333% для ширины, предполагая макет из трех столбцов, если присутствуют поля или отступы, рассчитайте их также как % и вычтите их из ширины выше, если присутствует граница, используйте box-sizing: border-box. (также исправляет расчет заполнения).   -  person Michael    schedule 30.05.2013
comment
да, я мог бы это сделать, 1 пиксель все равно будет потерян в последнем div, хотя, если я использую .33333 * 829 = 276,33 пикселя, .33 * 3 = 1 пиксель, поэтому последний div будет сдвинут влево на 2 пикселя на iPad.   -  person Masu    schedule 30.05.2013
comment
Я действительно считаю, что использование процентной единицы приводит к тому, что ширина рассчитывается по-разному, что должно решить вашу проблему. Вот демонстрация: jsfiddle.net/pZg4d   -  person Michael    schedule 30.05.2013
comment
хм, я не понимаю, я уже использую его в процентах от ширины, потому что webkit округляет проценты в меньшую сторону.   -  person Masu    schedule 30.05.2013
comment
Подождите, вы используете процентную ширину для ваших дочерних элементов div и все еще видите это? У меня никогда не было этой проблемы =\   -  person Michael    schedule 30.05.2013

Ответы (6)


arrow_upward
9
arrow_downward

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

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

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

person Nils Kaspersson    schedule 31.05.2013

arrow_upward
3
arrow_downward

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

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

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

person Darvanen    schedule 30.11.2015

arrow_upward
1
arrow_downward

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

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

person Stefano    schedule 04.02.2015

arrow_upward
0
arrow_downward

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

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

person maxlapides    schedule 27.12.2013
comment
Пожалуйста, разместите код прямо в своем ответе для потомков. Ответы, содержащие только ссылки, не подходят для StackOverflow, поскольку они могут исчезнуть в любой момент. - person Blazemonger; 30.07.2014
comment
И да, контент по ссылке пропал. - person Darko Tasevski; 17.06.2021

arrow_upward
0
arrow_downward

Если вы не можете выполнить 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
  }
}

Класс Safari добавлен в <html> с помощью теста Modernizr:

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

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

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

person Duncan Walker    schedule 03.07.2014

arrow_upward
0
arrow_downward

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

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

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

person WNDRMNT    schedule 27.03.2015