Ai-je trouvé un bug de chrome ou quelque chose m'échappe ?

23 mars 2023, 16:38

bonjour à tous,

J'ai un bug de taille de police lorsque la fenètre est étroite (mode téléphone).
J'ai simplifié mon code au maximum.

<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>TEST FONT-SIZE BUG</title>
		<style>
		p, li {
			font-size: 2em;
		}
		</style>
	</head>
	<body>
	  <fieldset></fieldset>
	  <p>Cette phrase est courte</p>
	  <p>Cette phrase est très très très très très très très très très très très très très très très très très très très très très très très très très très longue</p>
	</body>
</html>

Pour reproduire, j'affiche cette page sur chrome, je passe en mode "device toolbar" et je met la largeur inférieure à 826 px (plus visible si bien plus réduit)
Grâce aux outils développeurs, je regarde la taille de police des 2 balises p dans l'onglet "computed" et elle sont différente.
Avec une largeur de 320px la première balise p a la taille de 32px et la seconde 56.2px.

Arrivez vous à reproduire ce comportement ? en tout cas je le reproduit sur mon téléphone S20FE Chrome & Samsung browser
Mais pas sur Firefox.

La balise fieldset est indispensable pour voir le bug, j'envisage donc de trouver une alternative pour mon projet.

23 mars 2023, 21:57

C'est où "device toolbar" dans chrome ? je connais Firefox...

23 mars 2023, 22:09

Bonjour,

Tu as essayé avec une balise meta viewport ?

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TEST FONT-SIZE BUG</title>

Je n'ai pas testé sur smartphone mais peur-être voir la propriété css text-size-adjust :
https://developer.mozilla.org/fr/docs/W ... ize-adjust

23 mars 2023, 22:28

Et la déclaration du charset en HTML5 aussi du coup

Même si c'est sans doute pas le problème.

27 mars 2023, 14:22

Hello,

Merci pour la balise viewport, j'en avais une mais elle étais incorrecte, et comme la supprimer ne changeais rien je n'ai pas pensé qu'elle pouvait être la cause.

"Device toolbar" est l'icone en haut à droite qui ressemble à un téléphone et une tablette.

Ai-je trouvé un bug de chrome ou quelque chose m'échappe ?

Qui est en ligne