Pourquoi les bordures de mon champ de saisie disparaissent-elles dans Chrome lors d'un zoom ?

Bordures insaisissables de Chrome : dépannage des limites de saisie qui disparaissent

Les utilisateurs accédant à un formulaire simple via Chrome peuvent rencontrer un problème où les bordures des éléments de saisie disparaissent lors du zoom dedans ou dehors. Ce phénomène s'observe autour d'un niveau de zoom de 90%. La cause de ce comportement a suscité des débats, certains l'attribuant à des problèmes CSS et d'autres alléguant un bug de Chrome.

La racine du problème

La cause profonde de ce comportement semble provenir du moteur de rendu du navigateur. Lorsque vous utilisez le mot-clé « mince » pour spécifier la largeur de la bordure, Chrome l'interprète comme une valeur de pixel spécifique (souvent autour de 1 px), sujette à des erreurs d'arrondi lors des opérations de zoom. Cela peut rendre l'épaisseur de la bordure nulle, masquant ainsi les limites de l'élément.

Une solution simple

Pour résoudre ce problème, un simple ajustement CSS est recommandé. Au lieu d'utiliser « fin », spécifiez la largeur de la bordure à l'aide d'une valeur de pixel spécifique. Par exemple, changer le code CSS de :

INPUT, TEXTAREA {
  border-top: thin solid #aaa;
}

à :

INPUT, TEXTAREA {
  border-top: 1px solid #aaa;
}

devrait résoudre le problème. En définissant explicitement la largeur de la bordure, vous évitez les erreurs d'arrondi de Chrome et garantissez une visibilité cohérente de la bordure sur différents niveaux de zoom.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!