Font Pixelate Problem in Chrome (HTML5/CSS3)

Question

Ich habe ein Problem, dass Text pixeliert ist, wenn 2D-Maßstab der CSS-Transformation angewendet wird. (I nur in Chrome getestet. Ich werde tun, Cross-Browsing später, so dass Sie es auf verschiedenen Browsern nicht testen müssen.)

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-Code

$('.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'); 
}); 

Ich weiß, dass Chrome während der CSS-Transformation für die 3D-Beschleunigung eine Bitmap-Operation verwendet. Allerdings, wenn ich es in jfiddle getestet habe, war es nicht pixelig. Es scheint so, als ob Chrome nach dem Übergang einen Text neu zeichnet.

Siehe dieses arbeiten Beispiel. Bewegen Sie den Mauszeiger über eine Box. (Ich habe alle CSS-Elemente von meiner eigentlichen Website.)

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

Und das ist eine tatsächliche Website, die ein Problem aufgetreten ist. (Bewegen Sie den Mauszeiger einem der Blöcke, dann können Sie pixelig Schriftarten sehen, wenn es erweitert ist)

http://jsfiddle.net/GJ7BM

Wer eine Idee hat, wie man es beheben? Es ist in Ordnung, dass Sie es direkt auf meinem Handy reparieren können.

Answer 1

Das Problem scheint dies ähnlich: http://code.google.com/p/chromium/issues/detail?id=119470

Also, was das Problem tatsächlich auslöst, ist, wenn das Element als comsposited Schicht auf unebenen Koordinaten wiedergegeben wird. Wenn Sie die Option Composited render layer borders in chrome://flags aktivieren, können Sie sehen, dass das div in Ihrem ersten jsfiddle Beispiel zu einer zusammengesetzten Ebene wird, während der Übergang läuft, der Text verschwommen wird, sobald der Übergang abgeschlossen ist, wird er nicht mehr zusammengesetzt und der Text wird klar (Siehe diese modifizierte Geige, wo es einfacher ist, den Rand zu erkennen: http://jsfiddle.net/kF2Q5/).

In Ihrem zweiten jsfiddle Beispiel bleibt der Text verschwommen, auch nachdem der Übergang abgeschlossen ist, da es immer noch eine zusammengesetzte Ebene ist (vermutlich auf ungleichmäßigen Koordinaten), dies wird durch diese vielen verschachtelten und unterlagerten Transformationen verursacht (ein Element, das über einem liegt) Composited Layer, wird auch zu einer Composite Layer). Sehen Sie diese modifizierte Geige: http://jsfiddle.net/PqPSU/ Alle Transformationen deaktiviert verwendet werden:

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

So nur das auf die hovered- Element umwandeln gelassen wird. Wenn Sie die Option Composited render layer borders aktiviert haben, sollten Sie sehen, dass alle roten/braunen Ränder um die Kacheln, die zusammengesetzte Ebenen anzeigen, verschwunden sein sollten. Und Sie sollten sehen, dass der Text klar wird, sobald der Übergang abgeschlossen ist, genau wie in Ihrem ersten Beispiel.

Leider habe ich keine Lösung für das zugrundeliegende Problem, also das unscharfe Rendern von Composite Layer, ich denke es ist etwas, das an dieser Stelle nicht gelöst werden kann, sondern nur in der Rendering Engine und/oder dem Grafikkartentreiber behoben werden kann , je nachdem, wo genau das Problem verursacht wird.

Answer 2

Sie können die CSS-Eigenschaft für das Text-Rendering anpassen. https://developer.mozilla.org/fr/docs/CSS/text-rendering

Aber Ihr Beispiel funktioniert gut für mich, überprüfen Sie auf einem anderen Computer.

Sie sollten Ihren Browser oder Ihre Grafikkartentreiber aktualisieren.