Округление CSS субпикселей на

Question

преобразований Таким образом, этот вопрос пришел раньше, как здесь: Translate + Canvas = Blurry Text и здесь: Is it possible to "snap to pixel" after a CSS translate?

Там, кажется, не будет каких-либо выводов по любой из этих ссылок или любых других изделий I читал. Некоторые ответчики не думаю, что это было достаточно важно, чтобы заботиться, так вот почему в моей ситуации: Скриншот в Chrome 41.0.2272.104

Скриншот в Safari 8.0.4 (10600.4.10.7)

Подробную информацию о потерях см. В Safari? (Посмотреть на структуру в изображении космических челнока, или детали в скалах в 3 изображения)

CSS-за этих ребят

width: 100%; 
height: auto; 
position: relative; 
top: 50%; 
-webkit-transform: translateY(-50%); 

Так, в некоторых из этих ситуаций-в translateY закончится в половине пикселей. Первое изображение слева заканчивается с преобразованием матрицы следующим образом:

-webkit-transform: matrix(1, 0, 0, 1, 0, -56.5); 

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

Я пробовал несколько CSS-хаков, таких как использование scale3d без успеха. Если у кого-то есть какие-либо решения, свободные от JS, я бы очень признателен за общие знания.

Answer 1

В некоторых браузерах, вы можете воспользоваться плавающей точкой ошибок округления из известково округлить свой номер до ближайшего приращения желаемого:

calc((2.55px * 5e-324)/5e-324) 

должно вызывать 2.55px получить округляется до 3px. Это работает в некоторых браузерах, как вы можете видеть на графике ниже:

Так, согласно приведенной выше таблице выше, поддержка браузеров Chrome и Opera. Я не уверен в Сафари. К счастью, неподдерживаемые браузеры, IE & Firefox, просто игнорируйте calc как недопустимое значение свойства. Таким образом, чтобы использовать это, просто используйте приведенный ниже пример для генерации CSS, чтобы удовлетворить ваши потребности. Да, я знаю, что этот генератор не всегда объединяет подобные термины, и да, есть причина: объединение этих подобных терминов создаст число, которое невозможно сохранить.

var unit=document.getElementById('unit'), 
 
\t \t precision=document.getElementById('precision'), 
 
\t \t property=document.getElementById('prop'), 
 
\t \t output=document.getElementById('output'); 
 
    function formatProp(x){ 
 
    return (property.value.indexOf('%s') ? 
 
      property.value.replace(/%s/g, x) : 
 
      proprty.value + x).replace(/\\n/g, '\n') 
 
    .replace(/\\t/g, '\t').replace(/\\r/g, '\r'); 
 
    } 
 
\t (unit.oninput = precision.oninput = property.oninput = function(){ 
 
\t \t var Val = parseFloat(precision.value), V1="5e-324", V2="5e-324"; 
 
\t \t if (Val < 1) 
 
\t \t \t V1 = V2 = '' + 5e-324/Val; 
 
\t \t else if (Val > 1) 
 
\t \t \t V2 += ' * ' + Val, V1 += '/' + Val; 
 
    
 
\t \t output.textContent = formatProp(unit.value) + ';  /* for IE and FF*/\n' + formatProp('calc((' + unit.value + ' * ' + V1 + ')/' + V2 + ')') + ';'; 
 
\t })();

CSS Unit: <input type="text" id="unit" value="-50%" style="width:14em"/><br /> 
 
Property : <input type="text" id="prop" value="-webkit-transform: translateY(%s);\ntransform: translateY(%s)" style="width:40em"/><br /> 
 
Round to: <input type="number" id="precision" value="1" style="width:14em"/> pixels (can be decimal)<b5 /> 
 
<pre id="output" style="background:#eee"> </pre>

Пожалуйста, обратите внимание, что в соответствии с определением язычной реального времени реагировать, да, вы можете ввести в ваших собственных значений в демо выше, и да, соответствующий CSS будет быть сгенерировано в реальном времени.

Моего Testing Page Я создал: purposeful-rounding-errors browser support test

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