Firefox Mac OSX — текст, преобразованный CSS, не плавно перекашивается

Внедряя некоторые причудливые CSS3 и заставляя их работать во всех браузерах, я теперь потерялся в Firefox для Mac: текст искажается, но выглядит не очень красиво. Трудно объяснить, похоже, что он не может использовать субпиксели и поэтому всегда прыгает на полные пиксели, из-за чего текст выглядит странно.

Я создал jsFiddle, так что вы можете протестировать:

http://jsfiddle.net/8cYgM/2/

Примечание. Пример отлично выглядит в следующих браузерах: Chrome, Firefox (Windows 7), Safari (Mac), Internet Explorer 11.

<div class="skewthis">
    <p>Some text download start</p>
    <p>000000ooooo</p>
</div>
<p>Note: Text looks not as smoothly skewed in Firefox on Mac as in other browsers</p>

CSS

.skewthis {
    font-family: "Lucida Sans Unicode","Lucida Grande",Verdana,Arial,Helvetica,sans-serif;
    width:350px;

    transform-origin:0% 0%;
    -ms-transform-origin:0% 0%;
    -webkit-transform-origin:0% 0%;

    transform:skew(0deg,2deg) translate3d( 0, 0, 0);
    -ms-transform:skew(0deg,2deg) translate3d( 0, 0, 0);
    -webkit-transform:skew(0deg,2deg) translate3d( 0, 0, 0);

    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
}

.skewthis p {
    font-size:17px;
    line-height:28px;
    padding:0 15px;
    display:inline-block;

    background-color:#009ccc;
    color:#fff;
    margin:12px 0 0;
}

.skewthis p:after {
    content:'';
    display:block;
    clear: both;
}

person user828591    schedule 17.02.2014    source источник


Ответы (1)


Ответ, который вы ищете, можно найти здесь:

Улучшение качества вращения текста css3

Похоже, что это обычная проблема в браузере FireFox.

person Scott    schedule 17.02.2014
comment
Спасибо, я уже пробовал их раньше, похоже, для Firefox нет исправления. Странно то, что он прекрасно выглядит на Windows 7 Firefox, я не ожидал, что Mac Firefox будет настолько хуже. - person user828591; 20.02.2014