-webkit-transform Thuộc tính CSS Hose Font Rendering

Question

Câu hỏi này khá giống với this one ngoại trừ việc tôi thấy nó độc quyền trong Safari trên Mac (nền tảng duy nhất tôi cần quan tâm). Nó chắc chắn liên quan đến CSS và tôi nghĩ rằng tôi đã thu hẹp nó xuống một vài thuộc tính dường như tàn phá trên đường văn bản được hiển thị. Đó là:

-webkit-transform-style: preserve-3d; 
-webkit-transform: rotateY(180deg); 
-webkit-transform: rotateY(180deg); 
-webkit-perspective: 2500; 

Ngay sau khi tôi vô hiệu hóa này (bằng cách đặt trước chúng với một "x", ví dụ x-webkit-*), các văn bản ám tốt. Bật bất kỳ một kết quả nào trong các văn bản này. Dưới đây là một vài ảnh chụp màn hình có thể giúp hình dung sự khác biệt.

http://s3.amazonaws.com/codaset/ticket/6404/665/good.pnghttp://s3.amazonaws.com/codaset/ticket/6404/666/bad.png

Có ai có bất kỳ ý tưởng gì có thể gây ra điều này hoặc nếu/làm thế nào nó có thể được cố định? Google đã không được hữu ích khủng khiếp.

Cảm ơn.

Answer 1

Biến đổi trong Safari được tăng tốc phần cứng. Nó cho phép tốc độ tốt hơn nhiều, nhưng kết xuất không tuân theo cùng một đường dẫn, và một số chất lượng bị mất. Không có gì bạn có thể làm về nó, ngoại trừ không sử dụng biến đổi. :/

Answer 2

Tôi nghĩ rằng điều này thực sự có thể khắc phục trong các phiên bản iOS sau này (Tôi tin rằng 3.2 & 4.0) bằng cách sử dụng -webkit-font-smoothing: antialiased. Lưu ý: Bí danh sẽ vẫn khác nhau, nhưng trông sẽ khó xử hơn nếu nó hoạt ảnh.

Answer 3

Đã qua sự cố này hôm nay và phải sử dụng transform: scale(1.1) translate3d(0,0,0); (http://css-tricks.com/forums/topic/transforms-cause-font-smoothing-weirdness-in-webkit/) để làm cho nó hoạt động.