Внедряя некоторые причудливые CSS3 и заставляя их работать во всех браузерах, я теперь потерялся в Firefox для Mac: текст искажается, но выглядит не очень красиво. Трудно объяснить, похоже, что он не может использовать субпиксели и поэтому всегда прыгает на полные пиксели, из-за чего текст выглядит странно.
Я создал jsFiddle, так что вы можете протестировать:
Примечание. Пример отлично выглядит в следующих браузерах: 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;
}