1
Cela ne se produit pas dans Chrome ou Safari. C'est un peu perceptible dans IE8, mais très léger (et gris). Le contour que je vois sur mes deux moniteurs est verdâtre. Je ne sais pas si c'est un problème avec ma carte graphique ou avec le rendu des polices de Firefox à différentes opacités.Problème d'opacité de Firefox: le texte devient bizarre, contours colorés si l'opacité du conteneur <1.0
Il arrive que le style soit défini CSS statiquement, sans utiliser l'effet jQuery fadeTo().
La page de test suivante présente le problème. Déplacez votre souris de haut en bas à gauche pour changer l'opacité. Finalement, vous obtenez une opacité de 1,0, à quel point tout va bien. Des idées pour lesquelles cela pourrait être?
<!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>
Aucun problème ici, Firefox 3.6.3/Mac OS X 10.4.11 – drudge
Je remarque une bordure * très * légère autour de mes caractères, en raison d'un anti-aliasing sub-pixel pas complètement optimal; FF 3.6.11/Linux. Quel système d'exploitation utilisez-vous? –
@jncpl & @Marcel Korpel: Cette boîte exécute Windows 7. Merci pour les tests. – Robusto