Rounding CSS Subpixel auf Transformationen

Question

So hat dieses Problem vor kommen, wie hier: Translate + Canvas = Blurry Text und hier: Is it possible to "snap to pixel" after a CSS translate?

Es scheint keine Rückschlüsse auf eine dieser beiden Links-oder andere Artikel, die ich zu sein hab gelesen. Einige Responder hielt es nicht für wichtig genug war, zu kümmern, so hier ist, warum in meiner Situation ist es: Screenshot in Chrome 41.0.2272.104

Screenshot in Safari 8.0.4 (10600.4.10.7)

Sehen Sie den Verlust im Detail in Safari? (Blick auf die Struktur der Raum-Shuttle-Bild, oder das Detail in den Felsen im 3. Bild)

Die CSS für diese Jungs ist

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

So, in einigen dieser Situationen am translateY wird in einem halben Pixel enden. Das erste Bild auf der linken Seite endet mit einer Transformationsmatrix wie so hoch:

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

Zum jetzigen Zeitpunkt scheint es, Chrom dies Rendering schön (ich habe einige Leute sagen, gesehen verschiedene Browser das Problem in verschiedenen Versionen erstellen), aber Safari hat das Problem. Also, meine Annahme, dieses Problem zu beheben, besteht darin, sicherzustellen, dass es nur ganze Pixel gibt, was ich bereits getan habe, indem ich die Transformation in Javascript durchgeführt habe, aber das kostet mehr Leistungszeit, wenn es auf vielen Bildern läuft .

Ich habe ein paar CSS-only Hacks wie scale3d ohne Erfolg versucht. Wenn jemand JS-freie Lösungen hat, würde ich das geteilte Wissen sehr schätzen.

Answer 1

In einigen Browsern können Sie die Vorteile von Gleitkomma-Rundungsfehler von calc nehmen Ihre Zahl auf die nächste Erhöhung gewünscht abzurunden:

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

sollte 2.55px dazu führen, 3px zu erhalten aufzurunden. Dies funktioniert in einigen Browsern, wie Sie in der Tabelle unten sehen können:

So, nach der obigen Tabelle oben, unterstützt Browser sind Chrome und Opera. Ich bin unsicher über Safari. Glücklicherweise ignorieren die nicht unterstützenden Browser, IE & Firefox, einfach das calc als einen ungültigen Eigenschaftswert. Um dies zu nutzen, verwenden Sie das folgende Beispiel, um CSS nach Ihren Bedürfnissen zu generieren. Ja, ich weiß, dass dieser Generator nicht immer gleiche Terme kombiniert, und ja, es gibt einen Grund: die Kombination dieser Gleich-Terme würde eine Nummer erzeugen, die nicht gespeichert werden kann.

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>

Bitte beachten Sie, dass gemäß der lingualen Definition Echtzeit anspricht, ja, Sie in Ihrem eigenen Wert in die Demo oben eingeben, und ja, die entsprechende CSS wird Echtzeit generiert werden.

Meine Testing Seite I erstellt: purposeful-rounding-errors browser support test

Bitte beachten Sie, dass, während die obige Tabelle bietet derzeit Browsern unterstützt, ist es sehr viel Thema, weil die Verwendung von Rundungsfehlern Art von Nicht-Standard zu ändern ist: die einzige W3C-Spezifikation impliziert sie bei der Definition einer Fließkommazahl, sagt aber niemals explizit, dass Browser Subnormale Fließkomma-Notation oder Rundungsfehler implementieren müssen.