Chrome Bug？將輸入attr從「密碼」切換到「文本」顯示移動/凹凸

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"); 
}); 

當用戶集中在密碼字段，它顯示爲文本。當用戶從密碼字段中取消聚焦（模糊）時，字段會將屬性更改爲password而不是text。

現在問題。如果用戶再次點擊密碼字段，您會注意到字段中出現凹凸或移動，並在其旁邊顯示「圖標」。據我所知，這隻發生在Chrome瀏覽器中。

是否有理由或解決這個問題？

UPDATE

我有更多的CSS玩耍了，發現了 「問題」。此CSS：

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

如果我刪除padding-bottom:0;我不再受到撞擊。我不知道爲什麼，因爲這不應該觸及實際投入。如果有人有任何見解，那會很棒。

謝謝！

Answer 1

我發現......那CSS top: 3px;在.input-container input {似乎迷路......

我更新your fiddle併發出許多邊框顏色到元素尋找到這種「偏移」被應用。查閱全文或丟失。我也給了input不透明。

我確認這發生在Chrome 51和Opera 38
在FF 47，IE 11不，Safari瀏覽器5

你發現了一個bug！
;）

注：在解決將是簡單地刪除這個top: 3px;從.input-container input {因爲你label已定義top:5px。