Có thể "snap to pixel" sau khi dịch CSS không?

Question

Tôi đã tạo một hộp phương thức và canh giữa nó bằng cách sử dụng technique Chris Coyer mentioned. Vấn đề duy nhất tôi đã tìm thấy với nó cho đến nay là đôi khi hộp được bù đắp bởi một nửa điểm ảnh, có thể làm cho một số trẻ em trông hơi sôi nổi. Câu hỏi của tôi là ,: có thể chụp kết quả cho toàn bộ pixel gần nhất không?

Cập nhật

Dưới đây là một vài hình ảnh để minh hoạ rõ hơn vấn đề này. Trong hình ảnh đầu tiên này, bạn sẽ nhìn thấy đầu vào văn bản và gạch dưới liên kết đã trả lại một cách chính xác:

Hình ảnh thứ hai cho thấy tác dụng sau khi biến đổi CSS đã được sử dụng. Lưu ý sự mờ của đường gạch dưới liên kết và các đầu vào văn bản được hiển thị không chính xác.

Mặc dù hình ảnh thứ hai không hiển thị nó, thỉnh thoảng tôi nhận thấy các dòng trắng trên và dưới wit hiệu ứng mờ tương tự.

Đối với bản ghi, đầu vào văn bản được tạo kiểu bằng các đường viền đơn giản và màu nền. Tôi đã bao gồm CSS cho những đầu vào ở đây để bạn có thể thấy không có gì đặc biệt xảy ra:

input { 
    background-color: #FFFFFF; 
    border: 1px solid #CCCCCC; 
    border-radius: 0; 
    box-shadow: 0 1px 3px -1px #D5D5D5 inset; 
    color: #4C4C4C; 
    display: inline-block; 
    font-family: Arial,Helvetica,sans-serif; 
    font-size: 12px; 
    max-width: 100%; 
    padding: 5px; 
    transition: border-color 0.1s ease 0s; 
} 

Answer 1

Nếu bạn có thể tránh biến đổi 3d và sử dụng 2d biến thay vào đó, bản dịch sẽ chụp để pixel theo mặc định:

transform: translate(-50%, -50%); 

transform: translate3d(-50%, -50%, 0); 

.210

JSBin:http://jsbin.com/epijal/3/edit

Answer 2

Giải pháp chống đạn duy nhất là để đảm bảo rằng các yếu tố của bạn chiếm một số thậm chí của pixel. Nếu chiều cao (hoặc chiều rộng) không chia hết cho 2, thì nó sẽ cố gắng hiển thị phần tử của bạn trên một nửa pixel, gây ra sự mờ nhạt.

Firefox không có vấn đề này vì nó hỗ trợ hiển thị subpixel đúng. Vì vậy, mặc dù yếu tố của bạn là trên một nửa pixel, Firefox xử lý nó một cách thanh lịch.

Theo kinh nghiệm của tôi, Webkit thường snaps các yếu tố để các điểm ảnh gần nhất - (ví dụ, khi sử dụng letter-spacing tài sản) - vì vậy nó kinda lạ mà nó không hành xử theo cách tương tự cho translate.

Answer 3

Khi gặp phải vấn đề tương tự với subpixels trong Chrome và trong phiên bản 64, nó vẫn không thể xử lý các giá trị biến đổi subpixel, tôi quyết định viết tập lệnh js nhỏ, sửa lỗi subpixel. Bạn có thể tìm thấy nó trên github. Nó chỉ đơn giản làm tròn giá trị chuyển đổi thành pixel đầy đủ.

Hope ai đó sẽ tìm thấy nó hữu ích!