public
Created

Demonstration of Safari font rendering issues with CSS 3D transforms

  • Download Gist
gistfile1.html
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39
<html>
<head>
<style>
.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;
}
 
</style>
</head>
<body>
<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>
</div>
</body>
</html>

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.