Yuvarlama CSS subpixels dönüşümler

Question

üzerine

Yani, bu sorun, daha önce geldi buraya gibi: Burada Translate + Canvas = Blurry Text ve: Is it possible to "snap to pixel" after a CSS translate?

bu bağlantıların-ya da başka makalelerde ben birini konusunda herhangi bir sonuç olarak görünmüyor oku. benim durumumda bu yüzden bazı müdahale o bakım kadar önemli olduğunu düşünmüyordu, bu yüzden burada: Chrome 41.0.2272.104 yılında Ekran

(10600.4.10.7) Safari 8.0.4 yılında Ekran Görüntüsü

Safari'de ayrıntı kaybını görüyor musunuz? Bu adamlar için

CSS Yani

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

olan (uzay mekiği görüntüdeki yapının, veya 3. görüntüde kayaların detaylı bakmak) Bunlardan bazı durumlarda-translateY içinde yarı piksel olarak bitecek. o krom (i bazı millet farklı tarayıcılar farklı versiyonları sorunu yaratmak demek gördüğüm güzel bu render gibi görünüyor, şimdiki zamanda

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

: Soldaki ilk görüntü Bunun gibi bir dönüşüm matris ile biter), ancak şu anda Safari sorunu yaşıyor. Bu nedenle, bu sorunu düzeltmek için yaptığım varsayım, matematiği yaparak ve javascript'te dönüşümü uygulayarak yaptığım sadece bütün piksellerin olduğundan emin olmaktır, ancak bu, çok sayıda görüntü üzerinde çalışırken performansa daha çok mal olur. .

Scale3d kullanarak başarıdan yoksun birkaç CSS sadece hack denedim. Herhangi bir JS içermeyen çözüm varsa, paylaşılan bilgileri çok takdir ediyorum. Bazı tarayıcılarda

Answer 1

, istenen en yakın artım için numaranızı yuvarlamak kalk nokta yuvarlama hatalarını yüzen yararlanabilirsiniz:

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

2.55px 3px yuvarlanır kalmasına neden olmalıdır.

Yani, yukarıdaki yukarıdaki tabloya göre, destekleyici tarayıcılar Krom ve Opera şunlardır: Aşağıdaki grafikte de görebileceğiniz gibi bu bazı tarayıcılarda çalışır. Safari'den emin değilim. Neyse ki, desteklenmeyen tarayıcılar, IE & Firefox, sadece geçersiz bir özellik değeri olarak calc göz ardı. Bu nedenle, bunu kullanmak için, aşağıdaki örneği kullanarak ihtiyaçlarınızı karşılamak için CSS oluşturabilirsiniz. Evet, bu jeneratörün her zaman benzer terimleri bir araya getirmediğini biliyorum, ve evet, bir sebep var: bu gibi terimleri birleştirmek, saklanamayacak bir sayı yaratacaktır.

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>

duyarlı gerçek zamanlı dilli tanımı gereği, evet, yukarıdaki demo içine kendi değerleri girebilir ve evet, ilgili CSS olacak unutmayınız gerçek zamanlı oluşturulabilir.

Benim Test Sayfa oluşturduğum: purposeful-rounding-errors browser support test

grafik yukarıda özellikleri şu anda tarayıcıları destekleyerek, çok daha konu yuvarlama hatalarını kullanan standart dışı tür olduğu için değiştirmeye olduğuna dikkat edin: W3C dizilimde sadece onları bir kayan nokta sayısı tanımlamasında kullanır, ancak tarayıcıların alt normal kayan nokta gösterimini veya yuvarlama hatalarını uygulaması gerektiğini açıkça belirtmez.