Этого не происходит в Chrome или Safari. Это немного заметно в IE8, но очень слабое (и серое). Контур, который я вижу на обоих моих мониторах, зеленоватый. Я не знаю, является ли это проблемой с моей видеокартой или с рендерингом шрифтов в Firefox с различной прозрачностью.
Это происходит независимо от того, установлен ли стиль статически, без использования эффекта jQuery fadeTo().
Следующая тестовая страница показывает проблему. Переместите свою мышь от верхнего левого до нижнего правого, чтобы изменить непрозрачность. В конце концов вы получите непрозрачность 1,0, после чего все в порядке. Есть идеи, почему это может быть?
<!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>