This doesn't happen in Chrome or Safari. It's a little bit noticeable in IE8, but very slight (and gray). The outline I see on both my monitors is greenish. I don't know if it's an issue with my graphics card or with Firefox's rendering of fonts at different opacities.
It happens whether or not the style is set CSS statically, not using the jQuery fadeTo() effect.
The following test page shows the problem. Move your mouse from top left to bottom right to change the opacity. Eventually you get to an opacity of 1.0, at which point everything is fine. Any ideas why this might be?
<!DOCTYPE html>
<html>
<head>
<title>
Text Opacity Test
</title>
<style type="text/css">
body {
background-color: #ddd;
}
div#textDiv {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
padding: 20px;
font-size: 400%;
color: white;
}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready( function() {
$(document).bind('mousemove',function(e){
var hOpacity = (e.pageX / Math.round($('#textDiv').width())/2);
var vOpacity = (e.pageY / Math.round($('#textDiv').height())/2);
var opacity = vOpacity + hOpacity;
opacity = (opacity > 1) ? 1.0 : (opacity < 0) ? 0 : opacity;
$("#textDiv").text('Opacity: ' + opacity.toFixed(2));
$('#textDiv').fadeTo(0, opacity);
});
});
</script>
</head>
<body>
<div id="textDiv"></div>
</body>
</html>