CSS Transform Blurry Text

Question

Следующий CSS делает шрифт размытым в chrome Как сделать мой шрифт незатронутым?

.md-modal { 
    position: fixed; 
    top: 50%; 
    left: 50%; 
    width: 50%; 
    max-width: 630px; 
    min-width: 320px; 
    height: auto !important; 
    z-index: 2000; 
    visibility: hidden; 
    -webkit-backface-visibility: hidden; 
    -moz-backface-visibility: hidden; 
    backface-visibility: hidden; 
    -webkit-transform: translateX(-50%) translateY(-50%); <This line 
    -moz-transform: translateX(-50%) translateY(-50%); 
    -ms-transform: translateX(-50%) translateY(-50%); 
    transform: translateX(-50%) translateY(-50%); <-- This line 
} 

Answer 1

Это может быть из-за целый ряд причин, часто выпрямленного анкерных плоскости г с translateZ(0), чтобы обеспечить элемент со своим собственным композиционным слоем - однако (сочетание) в ниже, может также procide результатов:

backface-visibility: hidden; 
transform: translateZ(0) scale(1.0, 1.0) translate3d(0,0,0); 

Answer 2

Вы можете столкнуться с проблемой округления, см. Следующую статью.

http://keithclark.co.uk/articles/gpu-text-rendering-in-webkit/

Попробуйте это.

function centerTarget(tar){ 
    var y = Math.ceil(tar.height()/2), 
     x = Math.ceil(tar.width()/2); 

    tar.css('transform','translateX(' + x + 'px) translateY(' + y + 'px)'); 
} 

Где tar - объект jquery.

Хотя это на самом деле не в центре ИТС в пикселе, так что достаточно близко для меня :)

Answer 3

Просто мои два цента.

transform: translate3d(-50%, -50%, 0) scale(2, 2); 
zoom: 0.5; 

Это работает до тех пор, пока вы не используете rem «S в вашем CSS. Поскольку масштаб увеличивает размер, модуль rem также увеличивается, создавая странные побочные эффекты.