Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Demonstration of Safari font rendering issues with CSS 3D transforms
.container {
font-family: Helvetica;
font-size: 1.5em;
.transform {
-webkit-perspective: 150px;
.broken {
position: relative;
.almostfixed {
position: relative;
-webkit-font-smoothing: subpixel-antialiased;
.fixed {
position: relative;
background-color: white;
-webkit-font-smoothing: subpixel-antialiased;
<div class="container">
<div class="regular">This text renders fine (subpixel antialias)</div>
<div class="transform"></div>
<div class="broken">This text renders too thin (pixel antialias)</div>
<div class="almostfixed">This text is almost fixed and looks better (bold pixel antialias).</div>
<div class="fixed"><span>This text is fixed and renders fine (forced subpixel antialias).</span></div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment