Q: Chrome Bug? Switching input attr from 'password' to 'text' shows movement/bump I am making a password field that switches from "Password" to "Text" when being used.  When the user is using the password field, the "masking" comes off of the password field and shows what they are typing (in italics - this is important).  This temporary unmasking is part of a movement to destroy the confirm password field.
I've made a fiddle to show my issue.
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");
});  

When the user focuses in the password field, it shows as text.  When the user unfocuses (blurs) from the password field, the field then changes attributes to password instead of text.  
Now here's the problem.  If the user clicks on the password field again, you will notice a bump or movement in the field and the "icon" to the side of it.  This happens only in Chrome as far as I've noticed.
Is there a reason or a fix for this?
UPDATE
I've played around with more of the CSS and found the "issue".  This CSS:
.input-container:last-of-type {
    border-bottom:0;
    padding-bottom:0;
    margin-bottom:0;    
}

if I remove padding-bottom:0; I do not get the bumping anymore.  I'm not sure why yet since this shouldn't be touching the actual inputs.  If anyone has any insight, that'd be great.
Thanks!

A: I found... That the CSS top: 3px; in .input-container input { seems to get lost...
I updated your fiddle and gave many border colors to elements to find where this "offset" was aplied or lost. I also gave an opacity to the input.
I confirm this happens in Chrome 51 and Opera 38.
Not in FF 47, IE 11, Safari 5.
You found a bug!!!
;)
NOTE: a fix would be to simply remove this top: 3px; from .input-container input { since your label already has a top:5px defined.
