-webkit-transform CSS Özellikleri Hortum Yazı Tipi Oluşturma

Question

Bu soru, yalnızca Mac üzerinde Safari'de (umurumda olması gereken tek platform) göründüğümden neredeyse this one ile aynıdır. Kesinlikle CSS ile ilgili ve sanırım ben metin işlenen yol üzerinde hasara yol açıyor gibi görünen birkaç özellik aşağı daraltılmış. Bunlar:

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

En kısa zamanda (örneğin x-webkit-*, bir "x" öneki sayesinde), bu devre dışı olarak, metin iyi görüntüleniyor. Bunlardan bir'u etkinleştirmek, metrikli metinle sonuçlanır. İşte, farkı görselleştirmeye yardımcı olabilecek birkaç ekran görüntüsü.

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

herkes bu neden oluyor olabilir veya eğer/nasıl düzeltilebilir bir fikrin var mı? Google çok yardımcı olmadı.

Teşekkürler.

Answer 1

Safari'deki dönüştürmeler, donanım hızlandırılır. Daha iyi bir hıza izin verir, ancak render aynı boru hattını takip etmez ve bazı kalite kaybedilir. Bu konuda yapabileceğiniz hiçbir şey yok, dönüşümleri kullanmayın. :/

Answer 2

Sanırım bu, daha sonra iOS düzeltmeleri (3.2 & 4.0 sürümüne inanıyorum) -webkit-font-smoothing: antialiased kullanarak düzeltmek için mümkün olduğunu düşünüyorum. Not: aliasing hala farklı olacak, ancak animasyonlu ise daha az garip görünecek.

Answer 3

Bu soruna bugün rastladım ve çalışmak için transform: scale(1.1) translate3d(0,0,0); (http://css-tricks.com/forums/topic/transforms-cause-font-smoothing-weirdness-in-webkit/) kullanmak zorunda kaldı. "Hortum" için