Problem Pixelate czcionki w Chrome (HTML5/CSS3)

Question

Mam problem, że tekst jest pikselowany, gdy stosowana jest skala 2D transformacji CSS. (I tylko przetestowane w Chrome. Zrobię krzyż przeglądania później, więc nie trzeba go przetestować na różnych przeglądarkach.)

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; 
} 

kod Javascript

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

Wiem, że Chrome używa operacji bitmap podczas transformacji CSS do akceleracji 3D. Jednak gdy przetestowałem to w jsfiddle, nie było ono pikselizowane. Wygląda na to, że po zakończeniu przejścia Chrome ponownie rysuje tekst.

Zobacz przykład pracy pracy. Umieść wskaźnik myszy nad polem. (I umieścić wszystkie elementy CSS z mojego faktycznego miejsca.)

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

I to rzeczywiste miejsce, które ma problem. (Najedź każdy z bloków, a następnie można zobaczyć piksele czcionek gdy jest rozwinięty)

http://jsfiddle.net/GJ7BM

Ktoś ma pomysł jak to naprawić? To w porządku, że możesz to naprawić bezpośrednio na moim jsfiddle.

Answer 1

Problem wydaje się podobny do tego: http://code.google.com/p/chromium/issues/detail?id=119470

Więc co właściwie powoduje ten problem, kiedy element jest wyświetlany jako comsposited warstwa na nierównych współrzędnych. Jeśli włączysz opcję w chrome://flags, zobaczysz, że w pierwszym przykładzie z jsfiddle element div staje się warstwą złożoną podczas przejścia, tekst staje się niewyraźny, po zakończeniu przejścia nie jest już łączony, a tekst staje się wyraźny (zobacz to zmodyfikowane skrzypce, w którym łatwiej zauważyć granicę: http://jsfiddle.net/kF2Q5/).

W twoim drugim przykładzie jsfiddle tekst pozostaje nieostry, nawet po zakończeniu przejścia, ponieważ nadal jest warstwą złożoną (na prawdopodobnie nierównych współrzędnych), jest to spowodowane przez te wiele zagnieżdżonych i niedopuszczonych transformacji (element, który leży powyżej złożona warstwa, staje się również warstwą złożoną). Zobacz ten zmodyfikowany skrzypce: http://jsfiddle.net/PqPSU/ Wszystkie transformacje są wyłączone przy użyciu:

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

więc tylko przekształcić na elemencie campusu pozostało. Jeśli włączyłeś opcję Composited render layer borders, powinieneś zauważyć, że wszystkie czerwone/brązowe ramki wokół kafelków, wskazujące złożone warstwy, powinny zniknąć. Powinieneś zobaczyć, że tekst staje się jasny po zakończeniu przejścia, tak jak w twoim pierwszym przykładzie.

Niestety nie mam rozwiązania dla podstawowego problemu, tj. Niewyraźnego renderowania złożonych warstw, myślę, że jest to coś, czego nie można rozwiązać na tym końcu, ale można go naprawić tylko w silniku renderującym i/lub sterowniku karty graficznej , w zależności od miejsca, w którym powstał problem.

Answer 2

Możesz dostosować właściwość css do renderowania tekstu. https://developer.mozilla.org/fr/docs/CSS/text-rendering

Ale twój przykład działa dobrze dla mnie, sprawdź na innym komputerze.

Należy zaktualizować przeglądarkę lub sterowniki karty graficznej.