arrotondamento CSS subpixel su trasformate

Question

Quindi, questo problema è venuto prima, come qui: Translate + Canvas = Blurry Text e qui: Is it possible to "snap to pixel" after a CSS translate?

Non sembra essere qualsiasi conclusione su uno di questi link-o degli altri articoli I ho letto Alcuni soccorritori non hanno pensato che fosse abbastanza importante da curare, ecco perché è nella mia situazione è: Schermata in Chrome 41.0.2272.104

Schermata in Safari 8.0.4 (10600.4.10.7)

Vedi la perdita in dettaglio in Safari? (Guardare la struttura dell'immagine space-shuttle all'arrivo o dettaglio nella roccia nel 3 ° immagine)

Il CSS per questi ragazzi è

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

Così, in alcune di queste situazioni, il translateY finirà in mezzo pixel. La prima immagine a sinistra finisce con una matrice di trasformare in questo modo:

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

Al momento attuale, sembra che Chrome sta rendendo questo bene (ho visto alcune persone dicono diversi browser creano il problema in diverse versioni), ma attualmente Safari sta avendo il problema. Quindi, la mia ipotesi per risolvere questo problema è di assicurarmi che ci siano solo pixel interi, che ho già fatto facendo matematica e applicando la trasformazione in javascript, ma questo costa di più in termini di prestazioni quando si esegue su molte immagini .

Ho provato alcuni hack solo CSS come usare scale3d senza successo. Se qualcuno ha delle soluzioni JS-free, apprezzerei molto la conoscenza condivisa.

Answer 1

In alcuni browser, è possibile usufruire di floating point errori di arrotondamento da calc per arrotondare il proprio numero per l'incremento più vicino desiderata:

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

dovrebbe causare 2.55px per ottenere arrotondato fino a 3px. Questo funziona in alcuni browser, come si può vedere nel grafico sottostante:

Quindi, secondo la tabella di cui sopra sopra, browser supportati sono Chrome e Opera. Non sono sicuro di Safari. Per fortuna, i browser non supportati, IE & Firefox, ignorano semplicemente il calcolo come valore di una proprietà non valida. Quindi, per utilizzare questo, basta usare l'esempio qui sotto per generare CSS per soddisfare le tue esigenze. Sì, so che questo generatore non sempre combina i termini simili, e sì, c'è un motivo: unire questi termini simili creerebbe un numero che non può essere memorizzato.

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>

prega di notare che secondo la definizione linguale in tempo reale reattivo, sì, è possibile inserire nei propri valori nella demo di cui sopra, e sì, il corrispondente CSS essere generato in tempo reale.

mio test pagina I creato: purposeful-rounding-errors browser support test

Si prega di notare che, mentre il grafico sopra caratteristiche attualmente sostenendo i browser, è molto soggetto a modifiche in quanto utilizza gli errori di arrotondamento è una sorta di non-standard: solo le specifiche W3C li implica nella definizione di un numero in virgola mobile, ma non afferma mai esplicitamente che i browser debbano implementare la notazione in virgola mobile subnormale o gli errori di arrotondamento.