Opera translate font-rendering bug
In Opera, applying CSS translate changes the way
font is rendered (tested on Mac OS X 10.6.7
HTML
<h1>No translates</h1>
<ul>
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Blog</a>
</li>
<li>
<a href="#">About</a>
</li>
</ul>
<hr>
<h1>CSS translate applied</h1>
<ul class="transformed">
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Blog</a>
</li>
<li>
<a href="#">About</a>
</li>
</ul>
<hr>
<h1>CSS translate applied on a:active</h1>
<ul class="screenshots">
<li>
<h1>Firefox 4.0</h1>
<img src="http://dl.dropbox.com/u/544765/opera/Firefox%204.0.png" alt="Firefox screen shot">
</li>
<li>
<h1>Chrome 11.0</h1>
<img src="http://dl.dropbox.com/u/544765/opera/Chrome%2011.0.696.57.png" alt="Chrome screen shot">
</li>
<li class="opera">
<h1>Opera 11.10</h1>
<img src="http://dl.dropbox.com/u/544765/opera/Opera%2011.10%20build%202092.png" alt="Opera screen shot">
</li>
<li>
<h1>Safari 5.0.4</h1>
<img src="http://dl.dropbox.com/u/544765/opera/Safari%205.0.4%20%286533.20.27%29.png" alt="Safari screen shot">
</li>
</ul>
CSS
a {
display:inline-block;
color:blue;
}
/*
In Opera, applying CSS translate changes the way
font is rendered (tested on Mac OS X 10.6.7
*/
.transformed a {
-webkit-transform: translate(0, 1px);
-moz-transform: translate(0, 1px);
transform: translate(0, 1px);
}
/* non-relevant styling ↓ */
.screenshots {
margin:1em 0 0;
}
.screenshots li {
display:inline-block;
margin:0 1em 0 0;
}
.screenshots h1:after {
content: " ↓";
}
.opera {
padding:.5em;
border:3px solid lightpink;
}