Bug sur les champs texte dans Firefox

Ce n'est pas la première fois que je rencontre ce bug mais je m'étais jusqu'alors arrangé pour le contourner : le contenu par défaut d'un champ texte peut parfois disparaître sous Firefox 1.5.* et 2.*. Comme il m'a fallu cette fois-ci absolument le corriger au boulot, voici les solutions auxquelles je suis parvenu.

D'abord, un exemple simple sur lequel travailler : un formulaire composé d'un champ texte dans lequel nous plaçons une valeur par défaut :

<form id="outer" action="" method="get">
    <p id="inner"><input type="text" value="Valeur par défaut" /></p>
</form>
1. Code HTML d'un champ texte portant une valeur par défaut.

Absolument rien d'extraordinaire la-dedans. Le résultat est le suivant :

2. Rendu du champ texte.

Bien. Voyons maintenant ce qui se passe si nous modifions la position des ascendants du champ, si nous les sortons du flux du document avec un position: absolute :

#outer {
    position: absolute;
}
#inner {
    position: absolute;
}
3. Application de styles aux ascendants du champ texte.

Le résultat est cette fois-ci un peu perturbant :

4. Rendu du champ texte après l'application de styles aux ascendants.

Si vous consultez cette page avec Firefox 3 beta, Opera (9.26), Safari (3.0.4) ou Internet Explorer (6|7), rien n'a changé. Par contre, sous Firefox 2.* ou une version antérieure, vous ne verrez plus le texte par défaut. Si vous placez le focus sur le champ et que vous tapez une lettre quelconque, le texte par défaut réapparaît aussitôt. Ne me demander pas pourquoi, c'est comme ça. La seule chose à peu près certaine, c'est que ce comportement vient du fait que l'on a placé plus d'un ascendant de l'input en position absolue. Pour être plus précis, le bug apparaît si l'on ne définit pas de largeur explicite à l'un de ces ascendants, une largeur qui doit être au moins égale à celle de l'input.

Nous avons donc une première piste pour corriger l'affichage défaillant ; néanmoins, fixer la largeur des ascendants peut s'avérer problématique si cela modifie la présentation du formulaire. Une autre option sans doute moins conflictuelle consiste à forcer le type d'affichage du champ texte lui-même. Au final, trois règles CSS peuvent corriger le bug :

/* 1. Forcer l'affichage du champ texte : */
#inner input {
    display: block;
}
/* ou 2. appliquer une largeur suffisante à l'un des ascendants: */
#inner {
    width: 100%;
}
/* ou */
#outer {
    width: 100%;
}
5. Correction du bug de rendu sous Firefox <= 2.

Une courte recherche dans la base de bugs de Mozilla ne m'a retourné aucun rapport sur ce cas, même si un bug touchant à la disparition du curseur semble être de même nature.

// https://bugzilla.mozilla.org/show_bug.cgi?id=167801