Problème de position du curseur d'entrée HTML dans Chrome lorsque la valeur est vide
Récemment, j'ai remarqué des entrées de texte ayant un problème d'affichage dans Google Chrome mais uniquement lorsque le texte est vide.
Remarquez comment dans l'image du haut, lorsque l'entrée est vide, le curseur est trop haut dans l'entrée de texte.
Mais une fois que nous avons tapé du texte, il se corrige:
JSFiddle pour illustrer. Peut nécessiter Google Chrome version: 38.0.2125.101 m
HTML:
<input name="tb_password" type="password" id="tb_password" class=" validate[required,custom[password]]" placeholder="Type your password here" autocomplete="off" style="
margin: 0;
line-height: 46px;
">
CSS:
input[type="text"], input[type="password"] {
width: 100%;
height: 46px;
line-height: 46px;
font-size: 11pt;
color: #555 !important;
text-indent: 15px;
border-top: solid 1px #c5c5c5;
border-left: solid 1px #c5c5c5;
border-bottom: solid 1px #dadada;
border-right: solid 1px #dadada;
background: #fff;
-webkit-box-shadow: inset 0px 1px 5px 0px rgba(0, 0, 0, .1);
box-shadow: inset 0px 1px 5px 0px rgba(0, 0, 0, .1);
}
Cause:
Il semble que ce soit un bug de régression dans le moteur Chromium 38. Je peux reproduire en Chrome 38. * et Opera 25. * (qui utilise Chromium 38).
Bogue (s) signalé (s):
Comme l'a souligné @JackieChiles, il semble s'agir d'une régression de ce bogue [fermé comme obsolète]: https://code.google.com/p/chromium/issues/detail?id=47284
Comme suggéré dans le bug fermé, j'en ai enregistré un nouveau. https://code.google.com/p/chromium/issues/detail?id=426802&thanks=426802&ts=1414143535
Et ont également référencé un autre bogue signalé qui semble mettre en évidence le même bogue, mais ne parvient pas à définir le problème exact de manière générique. https://code.google.com/p/chromium/issues/detail?id=394664
Solution de contournement:
Comme détaillé dans les autres réponses ci-dessus, la solution de contournement consiste à éviter d'utiliser un pixel basé sur line-height attribut. Par exemple, échanger line-height:50px à line-height:1em ou line-height:100% donnera un comportement plus attendu.
Ajouter line-height:100%semble résoudre le problème pour nous:
je suggère de ne pas utiliser line-height du tout, ce n'est peut-être pas la bonne réponse mais ça marche pour moi (dernier chrome)
Violon mis à jour http://jsfiddle.net/efgq1svz/11/
Modification du style CSS sur la saisie de texte à partir de line-height: 46px à line-height: 1em résout le problème; mais je ne sais pas pourquoi.
J'ai eu le même problème ces jours-là, mais uniquement sur IOS 8.1, alors peut-être que ma solution aidera quelqu'un. Le problème venait d'une balise div qui avait défini une propriété CSS de transformation. Je résous le problème avec le code suivant:
#your-parent-div {
-webkit-transform: none;
-moz-transform: none;
-o-transform: none;
}
En 2012, j'ai créé une application Web HTML5 canvas et utilisé une propriété CSS3 pour changer la position du curseur lors de l'utilisation d'une image comme curseur:
#canvas { cursor: url(../image/pen_red_ff0000.gif)0 20, auto; }
Cela a fonctionné pendant des mois lors du développement de mon projet sur Firefox, Chrome/Chromium et d'autres navigateurs, mais depuis au moins Chrome 38, le changement de position du curseur a été ignoré. J'utilise la version Chromium Ubuntu et aujourd'hui , Je suis passé à Chromium 40 et le bogue est toujours là même après le redémarrage et la suppression de ".config/chromium".
La version des packages Ubuntu est "Version 40.0.2214.94 Ubuntu 14.04 (64 bits)" mais il y a quelques jours, j'ai essayé la dernière version officielle de Chromium Linux "Version 42.0.2287.0 (64 bits)" de https://download-chromium.appspot.com/ et le bogue n'est pas apparu.
Mon application web est ici http://drawcode.eu/projects/connect-points/ , vous devez connecter des points mais sur Chromium d'Ubuntu, je dois cliquer 20 pixels sous le milieu des points . C'est un problème de position du curseur, donc je pense que mon problème est lié à ce fil.
Quelqu'un peut-il confirmer avoir le bug et savoir depuis quand il est vraiment corrigé? Notez que le dernier Chromium officiel que j'ai téléchargé est la version 42 (non stable). Mon Chromium 40 d'Ubuntu a toujours le bug mais @Salmonface a dit qu'il a été corrigé dans la version 40 Problème de position du curseur d'entrée HTML dans Chrome lorsque la valeur est vide
Edit: Sur Debian, j'ai eu ce bug avec Chromium 37 (pas 38) aussi! Le bug est toujours là sur Chrome beta (version 41). Voici un Fiddle http://jsfiddle.net/baptx/L0fmvs7a /
Edit 2: En fait, le bogue de position du curseur CSS3 est apparu dans Chromium 25 ( https://commondatastorage.googleapis.com/chromium-browser-snapshots/index.html?prefix=Linux_x64/171003/ ) et il semble corrigé dans Chromium 42 ( https://commondatastorage.googleapis.com/chromium-browser-snapshots/index.html?prefix=Linux_x64/313000/ ), vous pouvez essayer par vous-même ma toile HTML5 et voyez que la position du curseur CSS3 est incorrecte. De Chromium 25 à Chromium 36 (testé avec la version développeur 261001), le Fiddle J'ai partagé des œuvres mais le navigateur vous permet de sélectionner du texte sur une div avec une position de curseur correcte ou incorrecte. De Chromium 37 (testé avec le développeur build 271001) sur Chromium 41, vous ne pouvez pas sélectionner le texte avec la bonne position du curseur sur le Fiddle.
Le bogue n'est pas uniquement la plate-forme GNU/Linux, il apparaît également sur une machine virtuelle Windows 8.
J'ai rencontré le problème similaire. Mais j'ai trouvé qu'il valait mieux utiliser le nombre pour line-height au lieu de la longueur (px, em ou rem). Peut-être que l'utilisation du code suivant résout ce problème:
input[type="text"] {
height: 46px;
line-height: 1.1;
}
De plus, le css ci-dessus doit peut-être être associé à -webkit-appaearance: none pour l'effet de rendu souhaité. Quoi qu'il en soit, cela fonctionne pour moi.
Il y a un autre hack que personne n'a mentionné comme je peux le voir. Vous pouvez utiliser une requête @media pour consulter Chrome:
@media screen and (-webkit-min-device-pixel-ratio: 0) {
line-height: normal;
}