28112 sujets

CSS et mise en forme, CSS3

[Résolu] Différence de hauteur d'input entre Chrome et Firefox

Bonsoir à tous,

en faisant des recherches sur les diverses manières de mettre en forme mes formulaires, j'ai écrit ce bout de code : https://codepen.io/bhenbe/pen/WNbxzgX


$input-height: 44px;
$border-size: 1px;
$font-size: 1.125rem;
$line-height: 1.3;

html {
	box-sizing: border-box;
}

* {
	&, &:before, &:after {
   	box-sizing: inherit;
	}
}

body{
	font: #{$font-size} / #{$line-height} sans-serif;
}

input{
	$line-height: 1;
	border: $border-size solid black;
	font: inherit;
	line-height: $line-height;
	
	/* it gives 44px in Firefox, 47 in Chrome and Safari */
	padding: calc(((#{$input-height} - (#{$border-size} * 2)) - (#{$font-size} * #{$line-height})) / 2);
}


Je voulais tout simplement maitriser la hauteur de mon input en ayant un padding variable selon la taille de police et l'épaisseur de bordure. Manque de bol, ce simple calcul qui donne un résultat nickel de 44px de haut sous Firefox me donne 47px sous Chrome et Safari.

J'ai donc commencé à checker les computed values des navigateurs pour comprendre quel élément provoquait cette différence mais Padding, Font-size et Line-height sont identiques. Aucune différence entre les trois navigateurs. Je suis donc perplexe et il y a certainement une subtilité que j'ai zappé.

Pouvez-vous m'éclairer à ce sujet ? Merci d'avance pour votre aide.
Hello,

J'ai inspecté vite fait et une chose que je ne comprends c'est l'utilisation du line-height, sachant que cette propriété gère l'espace entre les lignes. Hors ici, c'est un input, donc une ligne de texte, par rapport à un paragraphe (plusieurs lignes). Je pense qu'il faudrait l'éviter pour définir la hauteur.

J'ai créé un fiddle avec le code fourni: https://jsfiddle.net/w02guL6c/
Je désactive le line-height et l'input mesure verticalement 49.4px sur firefox et 49px sur Chrome. Les valeurs sont pas exactes au pixel près, mais déjà se rapproche beaucoup plus, comparé aux 3 pixels de différences précédemment.

J'essairai de creuser un peu plus si je le temps, mais je mettrai "line-height" de côté.
Aussi, le box-sizing devrait se mettre sur tous les éléments (*) pas seulement sur <html>

Le moteur de rendu de Firefox n'est pas le même que Google. Je suis donc pas sûr qu'un résultat identique au pixel près soit possible. A voir....

Documentation:
https://developer.mozilla.org/fr/docs/Web/CSS/line-height
Salut Allan,

merci pour ton retour.

Le line-height semble toutefois avoir une implication sur la hauteur potentielle de l'input. Si je l'adapte, la hauteur varie.

Aussi, le box-sizing est bien sur l'ensemble des éléments à partir de celui définit sur html.

Le fait est que la fonction calc devrait renvoyer une valeur identique sur l'ensemble des navigateurs même si ce n'est pas une certitude. Lorsque je passe mon pen en mode debug sous Firefox puis sous Chrome, la différence ne me semble pas logique.

Voici les valeurs calculées de Firefox:

border-width: 1px;
font-size: 18px;
line-height: 18px;
padding-bottom: 12px;
padding-top: 12px;
height: 44px;


Voici les valeurs calculées de Chrome:

border-width: 1px;
font-size: 18px;
line-height: 18px;
padding-bottom: 12px;
padding-top: 12px;
height: 47px;


Si j'additionne la hauteur selon (border-width * 2) + font-size + padding-top + padding-bottom, j'obtiens bien 44px. Je m'interroge donc vraiment sur ce qui fait que Chrome renvoie un input avec 3px de plus.

Encore une fois, c'est une pure curiosité de ma part et la qualité du code que j'ai produit peut certainement être remise en question.

Merci !
Effectivement, le box-sizing semble s'appliquer.

Le line-height sert à definir l'espace entre plusieurs lignes. Si c'est pour ajuster la hauteur, la propriété height sert à ça, on peut le faire avec du padding aussi. Line-height n'a pas été créé pour gérer la hauteur d'un élément, mais height, si.
J'explique clairement dans mon message précédent ce que je tente de faire.

Le fait d'utiliser ou pas line-height ne semble pas être le problème du cas que j'explique, sauf erreur de ma part.

Je vous remercie pour vos réponses mais elles ne m'éclairent pas sur ma question initiale.
Le fait d'utiliser line-height pourrait être le problème ici. Si le Padding, Font-size et Line-height sont identiques et le rendu n'est pas le même c'est que forcément il y quelque chose quelque part. La question à se poser c'est comment le navigateur interprète ce code, sinon vous n'aurez pas eu de problème en premier lieu ?

J'ai remis le fiddle à jour: https://jsfiddle.net/L2bqy41g/

J'ai retiré un ligne de code qui trainait sans raison. Il n'y avait pas de propriété devant.


$line-height: 1;


Et là je remarque que dans Firefox l'input mesure 191 x 23.4 et dans Chrome 218.994 x 22.994. Je parle des computed values. Les inputs par défaut sans contenu n'ont même pas les mêmes dimensions. Soit un rendu au final, dans Firefox 211.6 x 44 et dans Chrome 239.59 x 43.59. Donc en retirant cette ligne de code, les 2 hauteurs se rapprochent.

Je ne pense pas être à côté de la plaque. J'ai fais une recherche sur Google et je suis tombé sur cette page de StackOverflow (https://stackoverflow.com/questions/7229568/input-height-differences-in-firefox-and-chrome). Le raisonnement semble être le même que le mien. Comment le même code est interprété par les navigateurs, sachant encore une fois, qu'il n'ont pas le même moteur de rendu.

Edit:
Aussi, lorsque l'on utilise le rem, cette unité se base sur la font-size de la balise html. Peut-être qu'il serait plus prudent, de spécifier une font-size sur cette balise, même si le résultat est le même, c'est ce qui se fait généralement.
Modifié par allan00958 (14 Dec 2019 - 09:23)
Merci Allan pour votre retour.

Le codepen et le code css de base est en scss. $line-height est donc une variable mais pas forcément du code inutile.

Je reprends mon idée de départ: disposer d'une hauteur fixe entre divers éléments sur un formulaire. J'ai fait plusieurs essais différents mais la méthode que je présente ici à attirer mon attention car la hauteur diffère entre Firefox et Chrome/Safari alors que le calcul (computed values à l'appui) aurait dû donner un résultat parfaitement identique.

Je suis parti du principe que je maitrisais le hauteur de mes bordures, de ma taille de texte, de ma graisse et de ma hauteur de texte et que l'élément variable pouvait donc être le padding. Cela m'a amené à ce résultat:

padding: calc(((#{$input-height} - (#{$border-size} * 2)) - (#{$font-size} * #{$line-height})) / 2);


La variable input-height est la hauteur désirée pour tous les éléments du formulaire. J'y déduis la taille de bordure mutlipliée par deux pour top et bottom ainsi que la taille de font multipliée par sa hauteur de ligne. Je divise ensuite l'ensemble par deux pour avoir padding-top et padding-bottom.

Si je compare les computed values des deux navigateurs (Chrome & Firefox), ils me rendent les mêmes résultats, line-height compris (voir message précédent). Techniquement, je devrais donc avoir une hauteur identique mais ce n'est pas le cas du tout : 44px pour Firefox (ce qui colle à ma logique), 47px pour Chrome/Safari (donc 3 pixels qui viennent d'une valeur que je n'ai certainement pas pris en compte mais je ne vois pas laquelle).

Ce que je cherche à comprendre, c'est l'inconnue qui fait que j'ai cette différence entre les éléments. Et pourquoi, comme dans l'exemple de stackoverflow, on devrait spécifier une hauteur pour garantir celle-ci...

Voici le code css compilé à partir de mon codepen d'exemple:

html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

body {
  font: 1.125rem / 1.3 sans-serif;
}

input {
  border: 1px solid black;
  font: inherit;
  line-height: 1;
  /* it gives 44px in Firefox, 47 in Chrome and Safari */
  padding: calc(((44px - (1px * 2)) - (1.125rem * 1)) / 2);
}
Après avoir vérifié plus en profondeur, il y a effectivement différence d'interprétation de line-height dans Chrome et Firefox, ce qui ne m'aide absolument pas à comprendre comment cette interprétation diffère...

Je joins une capture des deux résultats.

upload/1576415668-63394-diff-ff-chrome.jpg

On voit que si Chrome part bien du principe que le texte est de font-size 18px et line-height 18px, il alloue 21px de haut à la zone de texte là où Firefox alloue bien 18px. Je suppose donc que Chrome prend en compte un autre paramètre qui m'échappe...

Si quelqu'un pouvait vraiment m'éclaircir sur ce sujet, ce serait cool. Merci d'avance.
Modifié par bhenbe (15 Dec 2019 - 14:14)
Hello,

J'ai mis à jour le fiddle: https://jsfiddle.net/s0ok5vfn/

Je me suis basé sur une réponse trouvée ici (la toute dernière):
https://stackoverflow.com/questions/45878318/css-text-field-difference-between-chrome-and-firefox

Donc, effectivement, il se peut que l'input était trop petit pour accueillir le texte, qui lui fait 18px. J'ai donc changé la valeur du line-height par 2em et la hauteur est la même dans les 2 navigateurs. Le line-height vaut 36px, soit la font-size 18px x 2. Mais en dessous de 2em, les valeurs sont plus les mêmes...
Meilleure solution
Sujet clos
Aller à