11548 sujets

JavaScript, DOM et API Web HTML5

[résolu] Bug de Firefox ?

Bonjour,

J'ai un bug étrange avec Firefox (2.0.0.14 Windows XP), je ne sais pas si l'origine du bug est dû au css où au javascript je vous explique le problème.

J'ai un tableau dans lequel j'ai un élément (div) que je cache/affiche via javascript lors qu'un clic sur un lien :
 var editComment = function(id)
 {
 	var com = document.getElementById("c"+id);
 	if(com.style.display != "block")
 	{
	 	com.style.display = "block";
	 	document.getElementById("t"+id).focus();
 	}
 	else
 		com.style.display = "none";
 }


Ce qui marche très bien.
Seulement certaines fois lorsque l'élément est affiché, la hauteur de la ligne dans le tableau ne se met pas à jour.
Et quand cela arrive si l'on clique sans relâcher un élément du menu la hauteur se met à jour Smiley biggol

Bref pour que vous compreniez mieux voici un exemple :
lien retiré
Il faut cliquer sur l'icône d'édition du commentaire. Une première fois pour avoir le focus, une 2ème pour le cacher et enfin une 3ème pour l'afficher à nouveau.

Avez vous aussi ce bug ou c'est mon PC qui déconne ?
Si c'est effectivement un bug (connu?) il y a-t-il une solution ?

Merci de votre attention.
Modifié par SamsamTS (23 May 2008 - 10:02)
Je dirais un bug d'affichage de Firefox. En tous cas, les valeurs de layout renvoyés par Firebug me paraissent correct.
ah les bugs navigateurs, sans eux on s'ennuierai. A mon avis on ne laisse pas le temps au navigateur de se rafraichir. Va savoir pourquoi ça j'en sais rien.

la solution, balancer la ligne du focus() via un timeout
pourquoi ça marche, comme ça et à cet endroit là. Pour moi c'est parce que le navigateur n'a pas le temps de se rafraichir et qu'on l'attaque immédiatement avec une methode graphique (focus() été lié à une action graphique on va dire)

C'est une des bizarreries qui se passent dans les navigateurs.


function editComment(id) {
 var com = document.getElementById("c" + id); 
if (com.style.display != "block") 
{ com.style.display = "block"; 
setTimeout(function() {document.getElementById("t" + id).focus()},2); 
} else { 
com.style.display = "none";
 } }
Bonjour,

Si c'est le même cas que j'ai rencontré (mais ça remonte à plus d'un an, je ne saurais donc pas l'affirmer), C'est effectivement un bug de FF2, corrigé dans FF3. La solution est de forcer FireFox à rafraîchir le layout de la page.

Dans mon cas, j'avais un block (#footer) qui aurait dû se décaler vers le bas et qui ne le faisait pas. J'avais écrit ce petit fix qui est appelé après le changement (c'est une bidouille, hein) :

[code]
function ff_fix_footer()
{
var footer = document.getElementById( "footer" );
footer.style.float="left";
footer.style.float="none";
}
[/code]


L'idée était de forcer le navigateur à redessiner l'élément en question. Ici j'ai utilisé la propriété float (par défaut à none sur le footer), parce que ça marchait et que c'était sans conséquences sur la mise en page générale (pas de clignotement) quelque soit le navigateur.

Essaie de changer une propriété de ta table, pour forcer Firefox à la redessiner.

Edit : pourquoi que ma balise [ code ] elle fait des trucs bizarres ?
Modifié par Lanza (22 May 2008 - 18:20)
Merci pour vos réponses.

Effectivement avec le setTimeout le bug disparaît

var editComment = function(id)
{
	var com = document.getElementById("c"+id);
	if(com.style.display != "block")
	{
	 	com.style.display = "block";
	 	setTimeout(function() {document.getElementById("t" + id).focus()}, 100);
	}
	else
		com.style.display = "none";
}


Je l'ai réglé sur 100ms car 2ms n'était pas assez.

Problème résolu donc, merci beaucoup Smiley biggrin
Sujet clos
Aller à