Firefox opacity issue: text gets weird, colored outlines if container opacity < 1.0
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>
Indeed, there is a problem with text and opacity in FF. You just need to set a background color to the element that you are changing the opacity.
If you can't (eg: the text is on various background) well... You are screwed :D
Dunno if it's working, but you can set background-color: rgba(0,0,0,0), maybe you are in luck.
加载中,请稍侯......
精彩评论