joshuapekera
8/21/2012 - 7:45 PM

Demonstration of Safari font rendering issues with CSS 3D transforms

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>