Tròn CSS subpixels về biến đổi

Question

Vì vậy, vấn đề này đã đưa ra trước đó, như ở đây: Translate + Canvas = Blurry Text và ở đây: Is it possible to "snap to pixel" after a CSS translate?

Có dường như không được bất kỳ kết luận về một trong các liên kết-hay bất kỳ bài viết khác tôi 'Đã đọc. Một số phản ứng không nghĩ nó đủ quan trọng để chăm sóc được, vì vậy đây là lý do tại sao trong hoàn cảnh của tôi đó là: Ảnh chụp màn hình trong Chrome 41.0.2272.104

Ảnh chụp màn hình trong Safari 8.0.4 (10600.4.10.7)

Xem mất chi tiết trong Safari? (Nhìn vào cấu trúc trong hình ảnh tàu con thoi, hoặc các chi tiết trong những tảng đá trong hình 3)

Các CSS cho những kẻ là

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

Vì vậy, trong một số trong những tình huống-the translateY sẽ kết thúc bằng một nửa pixel. Những hình ảnh đầu tiên bên trái kết thúc với một ma trận chuyển đổi như sau:

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

Tại thời điểm hiện tại, có vẻ như chrome được render này độc đáo (tôi đã nhìn thấy một số người nói rằng trình duyệt khác nhau tạo ra các vấn đề trong các phiên bản khác nhau), nhưng hiện tại Safari đang gặp sự cố. Vì vậy, giả định của tôi để khắc phục vấn đề này là đảm bảo rằng chỉ có toàn bộ pixel, mà tôi đã thực hiện bằng cách thực hiện phép toán và áp dụng biến đổi trong javascript, nhưng chi phí này nhiều hơn trong thời gian hoạt động khi chạy trên nhiều hình ảnh .

Tôi đã thử một vài lỗi chỉ có CSS ​​như sử dụng scale3d mà không thành công. Nếu bất kỳ ai có bất kỳ giải pháp JS nào, tôi sẽ đánh giá cao kiến ​​thức được chia sẻ.

Answer 1

Trong một số trình duyệt, bạn có thể tận dụng lợi thế của floating point lỗi làm tròn từ calc để làm tròn số của bạn để thặng dư gần mong muốn:

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

nên gây ra 2.55px để có được làm tròn lên đến 3px. Này hoạt động trong một số trình duyệt như bạn có thể thấy trong biểu đồ dưới đây:

Vì vậy, theo bảng xếp hạng trên trên, trình duyệt hỗ trợ là Chrome và Opera. Tôi không chắc chắn về Safari. Rất may, các trình duyệt không hỗ trợ, IE & Firefox, chỉ cần bỏ qua calc dưới dạng giá trị thuộc tính không hợp lệ. Vì vậy, để sử dụng điều này, chỉ cần sử dụng ví dụ dưới đây để tạo CSS để đáp ứng nhu cầu của bạn. Vâng, tôi biết rằng máy phát điện này không phải lúc nào cũng kết hợp các thuật ngữ giống nhau, và có, có một lý do: kết hợp những thuật ngữ như vậy sẽ tạo ra một số không thể được lưu trữ.

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>

Xin lưu ý rằng theo định nghĩa ngôn ngữ của real-time nhạy, có, bạn có thể nhập vào các giá trị riêng của bạn vào bản demo trên, và có, CSS tương ứng sẽ được tạo theo thời gian thực.

tôi kiểm tra trang tôi đã tạo: purposeful-rounding-errors browser support test

Xin lưu ý rằng trong khi bảng xếp hạng trên các tính năng hiện đang hỗ trợ các trình duyệt, nó là rất nhiều có thể thay đổi vì sử dụng lỗi làm tròn là loại phi tiêu chuẩn: spec W3C chỉ ngụ ý chúng trong định nghĩa của một số dấu chấm động, nhưng không bao giờ nói rõ ràng rằng các trình duyệt cần phải thực hiện ký hiệu dấu phẩy động dưới bình thường, hoặc làm tròn các lỗi.