Chrome Bug？入力パスワードを「パスワード」から「テキスト」に切り替えると、動き/バンプが表示されます

Question

使用時に「パスワード」から「テキスト」に切り替わるパスワードフィールドを作成しています。ユーザーがの場合、のパスワードフィールドを使用すると、パスワードフィールドの「マスキング」が表示され、入力しているものが表示されます（イタリック体 - これは重要です）。このtemporary unmaskingは、確認パスワードフィールドを破棄する動きの一部です。

私はfiddleを作成して問題を表示しました。

はHTML

<div class="input-container input-container--text"> 
    <label for="input-password"><i class="fa fa-key fa-lg"></i><span>Password</span></label> 
    <input type="text" class="input-password" name="input-password"> 
    <div class="message">A message goes here</div> 
</div> 

JS

$(document).on('focus', '.input-password', function(){ 
    $(this).attr('type', "text"); 
}); 
$(document).on('blur', '.input-password', function(){ 
    $(this).attr('type', "password"); 
}); 

ユーザーがパスワードフィールドに焦点を当て、それがテキストとして表示されます。ユーザーがパスワードフィールドからフォーカスを外す（ぼかした）場合、フィールドはtextの代わりにpasswordに属性を変更します。

ここで問題はです。ユーザーがパスワードフィールドを再度クリックすると、フィールドにバンプや動きがあり、その横に「アイコン」が表示されます。これは私が気づいた限りChromeでのみ発生します。

これには理由や修正はありますか？

UPDATE

私はCSSのより多くの周り演奏し、 "問題" を発見しました。このCSS：

.input-container:last-of-type { 
    border-bottom:0; 
    padding-bottom:0; 
    margin-bottom:0;  
} 

私はpadding-bottom:0;を削除する場合は、私はもうぶつけ得ることはありません。私はなぜこれが実際の入力に触れてはならないのかはまだ分かりません。誰かが洞察力を持っているなら、それは素晴らしいだろう。

ありがとうございます！

Answer 1

私は

... .input-container input {でCSS top: 3px;が迷子に思われること...見つけ私はyour fiddleを更新し、これはapliedまたは失われた「オフセット」どこ見つけるために、要素に多くの境界線の色を与えました。私はまた、inputに不透明度を与えました。

私は、これはクロム51で発生確認

とオペラFF 47、IE 11で38
ない、Safariの5

あなたはバグを見つけました！
;）

注：この修正は、単にあなたのlabel以来.input-container input {からこのtop: 3px;を取り除くことであろうが、すでに定義されてtop:5pxを持っています。