Pablo Prieto - Blog - firefox

Flash et bugs : Mozilla, wmode et champs de saisie

Pab. — Tue, 30 Jun 2009 11:54:00 +0200

J'inaugure aujourd'hui une nouvelle rubrique consacrée aux bugs de Flash (oui ça mérite bien une rubrique à part entière).

Pour commencer, un bug malheureusement assez connu et très ennuyeux, qui perdure depuis Flash 6 et toujours pas vraiment résolu à ce jour : le bug "du wmode". Pour les chanceux qui ne seraient pas encore tombés dessus, voici une démonstration.

Conditions :

Vous êtes sur Firefox, Safari ou Opera, sur Windows uniquement
Vous n'êtes pas américain et votre clavier n'est pas en configuration qwerty US
Vous avez une animation flash avec le paramètre wmode reglé sur "transparent" (pour pouvoir superposer des éléments html)
Vous avez un champ de saisie

Si vous réunissez ces conditions, bravo, vous vous rendez compte que vous ne pouvez pas taper le caractère "@", "?" ou bien un chiffre de la rangée haute (les chiffres du pavé numériques fonctionnent). Plutôt gênant par exemple quand vous devez saisir une adresse email.

Solutions possibles :

Attendre la saint glinglin qu'Adobe se bouge les fesses (le rapport de bug est ici)
Prévenir votre client du souci le plus en amont possible (ne vous inquietez pas, votre client adore entendre ce genre de justification technique)
Essayer un des hacks proposés ici, ici, ou encore là, principalement à base de javascript à la rescousse.

Pour aller plus loin...

Le souci vient en fait des deux cotés, Adobe et Mozilla, comme on peut le voir dans cette discussion. Voir notamment les messages de Masayuki Nakano pour Mozilla, et Jeff Mott pour Adobe.

En résumé, un correctif vient d'être intégré récemment dans le lecteur Flash pour qu'il supporte correctement les entrées clavier unicode, et on attend maintenant la prochaine release de Firefox pour les corrections coté Mozilla. Je viens de tester avec Firefox 3.5 et ça fonctionne effectivement mais seulement à partir du deuxième caractère saisi (!). Bref, c'est pas encore trop ça mais ils y travaillent. À suivre donc...

Pourquoi ai-je un rendu différent entre Firefox Windows et Firefox Mac ?

Pab. — Wed, 13 Jun 2007 14:18:00 +0200

Vous l'avez peut-être déjà constaté, il arrive parfois que le rendu d'une page soit différent entre Firefox sous Windows et son homologue sous Mac. Certains en concluent un peu trop vite à un bug du moteur gecko ou encore que celui-ci serait différent entre les 2 plates-formes. Heureusement il n'en est rien, il s'agit bel et bien du même moteur. Alors d'ou vient cette différence ?

Voici un exemple extrêmement simple, un paragraphe de texte de 300 pixels de large :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<title>untitled</title>	
	<style type="text/css" media="screen">
		p{width:300px; background:#EEE;}
	</style>
</head>
<body>	
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, (...) anim id est laborum.</p>
</body>
</html>

Et voici ce que l'on obtient sous Firefox Mac (à gauche) et Firefox Windows (à droite) :

On le voit bien ici, la différence vient tout simplement d'une hauteur de ligne différente. On n'y pense jamais assez, mais la propriété line-height est fixée par défaut à "normal" lorsque le concepteur ne la précise pas, laissant alors libre le navigateur de calculer une valeur "raisonnable" pour celle-ci. Cette valeur varie selon les systèmes d'exploitation, en fonction notamment de la résolution logique.

Voici l'extrait de la norme CSS 2 concernant la valeur "normal" :

normal
Tells user agents to set the computed value to a "reasonable" value based on the font size of the element. The value has the same meaning as <number>. We recommend a computed value for 'normal' between 1.0 to 1.2.

Voici maintenant la même page avec une hauteur de ligne fixée à 1.2 :

Le rendu est maintenant uniforme sur l'ensemble des navigateurs, et conforme au résultat attendu.

Conclusion : pensez à fixer vos hauteurs de ligne !