Skip to content

Embed URL

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Demonstration of Safari font rendering issues with CSS 3D transforms
<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
Something went wrong with that request. Please try again.