Проблема с пикселью шрифта в Chrome (HTML5/CSS3)

Question

У меня проблема с пикселированием, когда применяется 2D-масштаб преобразования CSS. (Я тестировал только в Chrome. Я буду делать кросс-просматривающие позже, так что вам не нужно, чтобы проверить его на различных браузерах.)

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 Код

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

Я знаю, что Chrome использует растровое изображение во время преобразования CSS для 3D-ускорения. Однако, когда я тестировал его в jsfiddle, он не был пиксельным. На первый взгляд кажется, что Chrome перерисовывает текст, когда переход выполняется.

См. Это пример. Наведите курсор на коробку. (Я положил все элементы CSS от моего фактического сайта.)

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

И это фактического сайт, который имеет проблемы. (Наведите указатель любого из блоков, то вы можете увидеть пиксельные шрифты, когда он расширен)

http://jsfiddle.net/GJ7BM

Каждый имеет представление о том, как это исправить? Это нормально, что вы можете исправить это прямо на моем jsfiddle.

Answer 1

Проблема, кажется, похож на это: http://code.google.com/p/chromium/issues/detail?id=119470

Так что на самом деле вызывает проблему, когда элемент отображается как comsposited слой на неровных координат. Если вы включите опцию Composited render layer borders в chrome://flags, вы увидите, что в вашем первом примере jsfiddle div становится композитным слоем, пока выполняется переход, текст становится размытым, как только переход завершен, он больше не компонуется, и текст становится понятным (см. эту измененную скрипку, где легче определить границу: http://jsfiddle.net/kF2Q5/).

В вашем втором примере jsfiddle текст остается размытым даже после завершения перехода, поскольку он все еще является композиционным слоем (предположительно по неравномерным координатам), это вызвано множеством вложенных и подложенных преобразований (элемент, который лежит выше композитный слой, тоже становится композиционным слоем). Смотрите эту модифицированную скрипку: http://jsfiddle.net/PqPSU/ Все преобразования в настоящее время отключена с помощью:

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

Таким образом, только преобразование на наведен элемент остается. Если вы включили опцию Composited render layer borders, вы должны увидеть, что все красно-коричневые границы вокруг плиток, указывающие составные слои, должны исчезнуть. И вы должны увидеть, что текст становится понятным после завершения перехода, как и в первом примере.

К сожалению, у меня нет решения основной проблемы, то есть размытой рендеринга композитных слоев, я думаю, что это то, что не может быть разрешено с этой целью, но может быть исправлено только в механизме рендеринга и/или драйвер графической карты , в зависимости от того, где именно возникает проблема.

Answer 2

Вы можете отредактировать свойство CSS-рендеринг текста. https://developer.mozilla.org/fr/docs/CSS/text-rendering

Но ваш пример отлично подходит для меня, проверьте на другом компьютере.

Необходимо обновить браузер или драйверы графической карты.