Firefox et un élément hidden

Firefox Windows, dernière version ne produit pas ce que tu décris...

Salut,

Effectivement je viens de tester et je reproduit bien le comportement. C'est en fait quand la largeur de l'écran (ou du conteneur) arrive en fin de ligne pile entre le "m" et la fin de "morte". Firefox considère que comme il y a une balise il s'agit de deux mot séparé et il fait juste revenir le second mot "orte" à la ligne car il n'y a plus de place.

Une solution possible est d'encadrer le mot avec un nowrap :

<span class="nowrap">m<span class="bug"></span>orte</span>

.test {
  white-space: nowrap;
}

.bug {
  position: absolute;
  visibility: hidden;
}

Modifié par _laurent (13 Mar 2019 - 09:46)

Sur le fond je dirais que Firefox à raison, et j'opterais pour un display : none; ou display : contents; en alternative voir si cela suffit à les mettre tous d'accord

span.bug {display : none;}

ou

span.bug {display:contents;position:absolute; visibility:hidden}

mais j'imagine que tu si tu as choisi position et visibility c'est que tu as probablement une raison au delà d'un simple test ...

Pour infos aussi a propos des display none et contents : https://developer.mozilla.org/en-US/docs/Web/CSS/display#Accessibility_concerns
Modifié par gcyrillus (13 Mar 2019 - 15:43)

cette balise contienne quelque chose ou rien, lorsque je retrécis la largeur de la page, Firefox me plante une césure (rupture de ligne) entre le "m" et le "o" sur le mot "morte", là où les autres navigateurs ne le font pas. https://inro.in/lucky-patcher/ https://inro.in/9apps/ https://inro.in/vidmate/

Bonjour

Merci pour vos réponses

Je ne pense pas que Firefox ait raison contre tout le monde: pas de raison de faire une rupture de ligne après une balise span. D'ailleurs, si le span n'est pas en absolu mais en static, le défaut n'apparaît pas.

Mettre un display:none ne résoud rien.
En effet, si le span.bug est caché, c'est qu'il doit apparaître à un moment donné.
Si je mets un display:none, le problème est réglé tant que le span.bug est caché, mais il revient dès qu'on le dévoile par un mouseover: le remède et pire que le mal car tout le texte se décale!

Le nowrap n'est pas satisfaisant non plus pour 2 raisons:
Le montage final, des plus classiques, est le suivant:

<p>texte <span class="conteneur">m<span class="bug">texte caché</span>orte</span>…</p>

Le code css, tout aussi classique, est le suivant

span.bug { position:absolute; visibility:hidden;}
span.conteneur {position:relative;}
span.conteneur:hover span.bug { visibility:visible;}

1 - La rupture se fait après le </span> de classe bug. Si le span.bug est suivi par un caractère du genre parenthèses, virgule ou point, la rupture se fait devant ce caractère et le résultat, vous en conviendrez, ne sera pas terrible (un point ou une virgule en début de ligne, hein…)! Resterait la solution de mettre ces caractères dans le conteneur nowrap, mais là-aussi pour l'esthétique…
2 - Le conteneur peut contenir un groupe de mots. Faire un nowrap sur un groupe de mot dans un texte fera une mise en page des plus disgracieuses, notamment sur un smartphone.

Quand aux autres options, du display, du white-space, du text-wrap, du no-wrap, etc... rien n'y fait!
Moralité: obligé de passer par du jquery pour faire une animation des plus rudimentaires qui doit relever de css1.0 !!!

Merci néanmoins pour votre aide et vos conseils.
Modifié par Colnem2 (14 Mar 2019 - 10:59)

Il y a pleins d'erreurs dans ton code ( span pas fermé, ] au lieu } ) d'autre part je ne comprend pas l’intérêt de mettre un texte caché en plein milieu du mot morte. Je ne sais pas ce que tu veux faire mais c'est une mauvaise idée de couper un mot comme cela, pour quelque raison que ce soit, et ce n'est assurément pas comme cela qu'il faut faire.

Salut,

En fait c'est ton "position: absolute;" qui déclenche ce comportement.
Pourquoi placer une balise en plein milieu d'un mot si c'est pour la replacer en absolute après ? Tu n'as pas moyen de faire ce que tu souhaite sans la position absolute ?

Bonjour messieurs

1 - Il y a des erreurs parce que j'ai tapé à la main: c'est corrigé. Mais il n'y en a pas dans ma page.
2 - Bien sûr, dans mes pages, je ne mets pas le span au milieu du mot: il s'agit d'un exemple pour montrer le bug. Je le mets au début ou à la fin du mot "morte".
Si je le mets au début et que le mot "morte" passe en début de ligne, le texte caché s'affiche en fin de la ligne précédente.
Si je le mets à la fin et qu'il est suivi par une virgule ou un point, ceux-ci passent tout seuls sur la ligne suivante qui débute alors par une virgule ou un point.

Voilà pourquoi ce bug me gêne.

Je sais que c'est le position absolute qui déclenche ce comportement. Il n'en demeure pas moins que c'est une anomalie de faire une rupture à la fin d'un span absolute inline non suivi d'un caractère sécable. D'ailleurs, Firefox est le seul des grands navigateurs à faire ça.

Merci de vos commentaires.
Modifié par Colnem2 (14 Mar 2019 - 11:01)

Ok, j'ai compris.

Ce que propose Laurent a l'air de solutionner le problème.

span.conteneur {position:relative; white-space: nowrap;}

Et en effet firefox n'a pas l'air d'avoir le bon comportement mais à part leur signaler je ne vois pas bien ce qu'on peut y faire.

J'aurai tendance a ne même pas corriger ce problème personnellement.

Ca ne nous dit pas pourquoi il faut qu'il soit positionné en absolute si tu tiens a le laisser dans le texte...

Colnem2 a écrit :
Je sais que c'est le position absolute qui déclenche ce comportement. Il n'en demeure pas moins que c'est une anomalie de faire une rupture à la fin d'un span absolute inline non suivi d'un caractère sécable. D'ailleurs, Firefox est le seul des grands navigateurs à faire ça.

Perso je ne vois pas ça comme une anomalie, mais plutôt comme un comportement logique qui n'a pas été modifié pour coller à ce que les gens pourraient attendre (comme toi ici).

La position absolute retire l'élément du flux, tout en le laissant dans le DOM, je trouve ça logique que le navigateur l'interprète comme une coupure dans le mot.

Exact... Un infobulle qui se ballade au dessus du mot, tantôt à droite tantôt à gauche en fonction de la position du mot dans la ligne et de la longueur de l'info-bulle, tout en acceptant les rétrécissements d'écran faits par l'utilisateur. Si la longueur de l'info bulle est supérieure à la moitié (ou tout autre pourcentage définit par le codeur) de celle de la ligne, l'infobulle passe en multiligne en s'agrandissant vers le haut. Le tout devant être opérationnel pour des écrans de 320px (iphone 5) à ... max-width du body.

J'y suis arrivé en jQuery pour tous les navigateurs.
En css, j'y serai arrivé sans ce "bug" qui, sous Firefox uniquement, me met des virgules en début de ligne ou l'info-bulle à l'extrème droite quand le mot passe à l'extrème gauche.

"La position absolute retire l'élément du flux, tout en le laissant dans le DOM, je trouve ça logique que le navigateur l'interprète comme une coupure dans le mot"

Pas moi: puisque l'élément n'est pas dans le flux, il ne doit pas perturber le flux. et je ne suis pas le seul à penser ainsi puisque les développeurs de Microsoft, de Chromium et d'Opéra ont pensé comme moi.

Mais on a le droit d'être d'un avis différent.

Merci de la discussion, enrichissante.
Modifié par Colnem2 (14 Mar 2019 - 21:35)