Phát hành phông chữ Pixel trong Chrome (HTML5/CSS3)

Question

Tôi gặp vấn đề khi văn bản được pixelated khi áp dụng quy mô chuyển đổi CSS 2D. (Tôi chỉ thử nghiệm trong Chrome. Tôi sẽ làm cross-xem sau, do đó bạn không cần phải kiểm tra nó trên các trình duyệt khác nhau.)

CSS

.versus_block_hover 
{ 
    -webkit-transform: scale(1.2,1.2)!important; 
    -webkit-transition: 50ms 0ms!important; 
    z-index:1100!important; 
    border-width:1px; 
    border-color:#000; 
    border-style:solid; 
} 

Javascript Mã

$('.versus_block').hover(function() { 
    $(this).addClass('versus_block_hover'); 
    $(this).parent().css('z-index','1100'); 
}, function() { 
    $(this).removeClass('versus_block_hover'); 
    $(this).parent().css('z-index','0'); 
}); 

Tôi biết rằng Chrome sử dụng thao tác bitmap trong khi chuyển đổi CSS để tăng tốc 3D. Tuy nhiên, khi tôi thử nghiệm nó trong jsfiddle, nó không phải là pixelated. Mặt, có vẻ như Chrome vẽ lại văn bản khi quá trình chuyển đổi hoàn tất.

Xem ví dụ làm việc ví dụ này. Di chuột qua một hộp. (Tôi đặt tất cả các yếu tố CSS từ trang web thực tế của tôi.)

http://jsfiddle.net/eCkdE/11/

Và, đây là một trang web thực tế rằng có một vấn đề. (Di chuột bất kỳ của các khối, sau đó bạn có thể thấy các phông chữ pixelated khi nó mở rộng)

http://jsfiddle.net/GJ7BM

Bất cứ ai có một ý tưởng làm thế nào để sửa chữa nó? Không sao mà bạn có thể sửa nó trực tiếp trên jsfiddle của tôi.

Answer 1

Vấn đề có vẻ tương tự như sau: http://code.google.com/p/chromium/issues/detail?id=119470

Vì vậy, những gì thực sự gây nên các vấn đề, là khi các phần tử được trả lại như một lớp comsposited về tọa độ không đồng đều. Nếu bạn bật tùy chọn Composited render layer borders trong chrome://flags, bạn có thể thấy rằng trong ví dụ jsfiddle đầu tiên của bạn, div trở thành lớp tổng hợp trong khi quá trình chuyển đổi đang diễn ra, văn bản trở nên mờ, sau khi quá trình chuyển đổi hoàn tất, nó không còn được tổng hợp nữa và văn bản trở nên rõ ràng (xem fiddle sửa đổi này, nơi dễ dàng hơn để phát hiện biên giới: http://jsfiddle.net/kF2Q5/).

Trong ví dụ jsfiddle thứ hai, văn bản vẫn bị mờ ngay cả sau khi quá trình chuyển đổi hoàn thành vì nó vẫn là một lớp tổng hợp (trên tọa độ không đồng đều), điều này là do nhiều biến đổi lồng nhau và được gạch dưới (phần tử nằm phía trên) lớp tổng hợp, trở thành một lớp tổng hợp quá). Xem fiddle sửa đổi này: http://jsfiddle.net/PqPSU/ Tất cả các biến đổi đang được vô hiệu hóa sử dụng:

* { 
    -webkit-transform: translateX(0) !important; 
} 

Vì vậy, chỉ có thay đổi về các yếu tố dao động còn lại. Nếu bạn đã bật tùy chọn Composited render layer borders, bạn sẽ thấy rằng tất cả đường viền màu đỏ/nâu xung quanh các ô, cho biết các lớp tổng hợp sẽ biến mất. Và bạn sẽ thấy rằng văn bản trở nên rõ ràng khi quá trình chuyển đổi hoàn tất, giống như trong ví dụ đầu tiên của bạn.Không may là tôi không có giải pháp cho vấn đề cơ bản, tức là việc vẽ các lớp hỗn hợp bị mờ, tôi đoán đó là thứ không thể giải quyết vào cuối này, nhưng chỉ có thể được sửa trong công cụ kết xuất và/hoặc trình điều khiển cạc đồ hoạ. , tùy thuộc vào nơi chính xác vấn đề được gây ra.

Answer 2

Bạn có thể điều chỉnh thuộc tính css hiển thị văn bản. https://developer.mozilla.org/fr/docs/CSS/text-rendering

Nhưng ví dụ của bạn hoạt động tốt cho tôi, hãy kiểm tra trên một máy tính khác.

Bạn nên cập nhật trình duyệt hoặc trình điều khiển cạc đồ hoạ của mình.