Les bordures disparaissent dans Chrome lorsque je fais un zoom avant
J'ai ce formulaire vraiment simple: http://jsfiddle.net/TKb6M/91/ . Parfois, lorsque je fais un zoom avant ou arrière à l'aide de Chrome, les bordures d'entrée disparaissent. Par exemple, lorsque je fais un zoom à 90%, j'obtiens:
Naturellement, votre kilométrage peut varier.
Au cas où vous vous poseriez des questions sur ces <span> tags, je les ai ajoutés en suivant la recommandation de Comment puis-je faire en sorte qu'un élément d'entrée occupe tout l'espace horizontal restant? .
Y a-t-il un problème avec mon CSS ou est-ce un bug Chrome? Il semble fonctionner correctement sur Firefox. Que puis-je faire pour éviter ce problème?
Merci.
Vous forcez Chrome à faire un calcul de sous-pixel, et cela a généralement des comportements étranges.
Si vous modifiez la hauteur de l'entrée à 30 pixels, un zoom à 90% fonctionne bien (car il s'agit de 27 pixels), mais pas un zoom de 75% (car il s'agit de 22,50 pixels).
Vous pouvez également éviter cela en donnant à la bordure une largeur de 3 pixels. Dans ce cas, vous verrez que la largeur des bordures est différente à différents endroits.
Quoi qu'il en soit, la meilleure solution est de donner plus d'espace autour des entrées afin que la bordure puisse être dessinée proprement même si elle est en position sous-pixel.
Je suis presque sûr que Luís Pureza a résolu son problème, mais j'ai trouvé un moyen très simple de le résoudre en ne changeant que ceci:
Si vous avez une bordure de table comme celle-ci:
INPUT,TEXTAREA {
border-top: 1px solid #aaa
}
Changez-le en celui-ci:
INPUT,TEXTAREA {
border-top: thin solid #aaa
}
J'ai trouvé cette solution sur ce lien: https://productforums.google.com/forum/#!topic/chrome/r1neUxqo5Gc
J'espère que ça aide
Je sais que je suis en retard dans le jeu, mais le truquer un peu et régler la largeur de la bordure à 1,5 px semble faire l'affaire à chaque fois.
J'ai eu le même problème avec un div enveloppé sans bordure input, et toutes les bonnes réponses ici ne m'ont pas aidé Enfin, en ajoutant:
overflow: auto;
à l'élément div (celui avec la bordure problématique) a fait l'affaire.
C'est parce que vous définissez une hauteur fixe, et lorsque vous zoomez, l'entrée augmente plus que cette hauteur, ce qui fait disparaître la bordure. Utilisez plutôt la hauteur de ligne et le rembourrage pour obtenir la hauteur souhaitée - voir Fiddle mis à jour
Mise à jour: Ignorez ce que j'ai dit, c'est parce que vous définissez overflow:hidden sur votre travée, la suppression devrait faire l'affaire. Cela pourrait entraîner un besoin de changer la largeur de l'entrée.
Sur une note latérale; vous faites de votre span un élément de bloc qui est bien et fonctionne, mais il semble un peu mauvais. Essayez d'utiliser des éléments de bloc, comme un au lieu de remplacer un élément en ligne par un bloc, si possible.
J'ai eu un problème similaire avec chrome en 2018 - la bordure supérieure manquait sur les entrées et les zones de texte. Le correctif consistait à spécifier la bordure supérieure dans css simplement comme
INPUT,TEXTAREA {
border-top: 1px solid #aaa
}
Je ne peux pas expliquer pourquoi cela était nécessaire, et cela ne faisait que perdre les frontières à certains endroits, mais au moins c'était une solution rapide.
En cas de débordement: caché est nécessaire, mentionnez débordement: caché uniquement pour le navigateur auquel vous êtes confronté au problème de largeur. Dans un autre navigateur, l'affichage metion: flex pour que la largeur soit automatiquement prise correctement et aussi, pour que lors d'un zoom avant/arrière, les bordures ne disparaissent pas.
Par exemple: la largeur n'était pas correcte dans mon cas uniquement pour IE, j'ai donc mentionné:
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.spanStyles {
display: block;
overflow: hidden;
}
}
Et le problème du zoom avant/arrière se produisait dans Firefox et Chrome, donc j'ai mentionné
.spanStyles {
display : flex;
}
cela a résolu mon problème dans tous les navigateurs.