Skip to content

Instantly share code, notes, and snippets.

@rolftimmermans

rolftimmermans/gist:2489198

Created April 25, 2012 11:56
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save rolftimmermans/2489198 to your computer and use it in GitHub Desktop.
Save rolftimmermans/2489198 to your computer and use it in GitHub Desktop.
Download ZIP
Demonstration of Safari font rendering issues with CSS 3D transforms
Raw
gistfile1.html
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment