Zaokrąglanie CSS subpikseli na transformacje

Question

więc kwestia ta ma pochodzić przed, jak tutaj: Translate + Canvas = Blurry Text i tutaj: Is it possible to "snap to pixel" after a CSS translate?

Tam nie wydaje się być żadnych wniosków na jeden z tych linków-lub innych artykułów I czytałem. Niektóre odpowiedzią nie sądzę, że był na tyle ważne, aby dbać, więc o to, dlaczego w mojej sytuacji to: ekranu w Chrome 41.0.2272.104

ekranu w Safari 8.0.4 (10600.4.10.7)

Zobacz szczegóły utraty w Safari? (Spojrzymy na strukturę w obrazie space-Transfer, albo szczegółowo w skałach w 3 obrazek)

CSS dla tych facetów jest

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

Więc w jakimś z tych sytuacji-na translateY skończy się w połowie piksela. Pierwsze zdjęcie po lewej stronie kończy się z macierzy transformacji tak:

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

W chwili obecnej wydaje się, chrom jest świadczenie to ładnie (widziałem niektórzy ludzie mówią różne przeglądarki stworzyć problem w różnych wersjach), ale obecnie Safari ma problem. Tak więc, moim założeniem, aby rozwiązać ten problem jest upewnienie się, że istnieją tylko całe piksele, które już zrobiłem wykonując matematykę i stosując transformację w javascript, ale to kosztuje więcej w czasie wydajności, gdy działa na wielu obrazach .

Próbowałem już kilku hacków typu CSS, takich jak używanie scale3d bez powodzenia. Jeśli ktoś ma jakieś rozwiązania wolne od JS, bardzo doceniam dzieloną wiedzę.

Answer 1

W niektórych przeglądarkach, można skorzystać z zmiennoprzecinkowych zaokrąglania błędów z calc zaokrąglić swój numer do najbliższego pożądanego przyrostu:

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

powinny powodować 2.55px aby zaokrąglona w górę do 3PX. Działa to w niektórych przeglądarkach, jak widać na poniższym wykresie:

Zatem zgodnie z powyższym wykresie powyżej przeglądarek pomocniczymi Chrome i Opera. Nie jestem pewien co do Safari. Na szczęście nieobsługiwane przeglądarki, IE & Firefox, po prostu pomijają calc jako niepoprawną wartość właściwości. Aby to wykorzystać, użyj poniższego przykładu, aby wygenerować CSS, aby dopasować swoje potrzeby. Tak, wiem, że ten generator nie zawsze łączy podobne terminy, i tak, jest powód: połączenie tych podobnych terminów stworzy liczbę niezdolną do przechowywania.

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>

Należy pamiętać, że zgodnie z definicją językowej czasie rzeczywistym czuły, tak można wprowadzić swoje własne wartości w demo powyżej, i tak, odpowiedni CSS być generowane w czasie rzeczywistym.

moich testów Page stworzyłem: purposeful-rounding-errors browser support test

Należy pamiętać, że podczas gdy wykres powyżej dysponuje obecnie wsparcie przeglądarek, to jest bardzo dużo ulec zmianie, ponieważ wykorzystując błędy zaokrąglenia jest sort niestandardowych: tylko W3C specyfikacja implikuje je w definicji liczby zmiennoprzecinkowej, ale nigdy nie mówi wprost, że przeglądarki muszą implementować notację zmiennoprzecinkową pod-normalną lub błędy zaokrąglania.