Google Chrome 38 Text Input Caret Vertical Position Off
Please note that this post is over a year old and may contain outdated information.
With Chrome version 38, there is a regression bug that causes a strange behavior with the caret position in HTML input fields. The caret sits at the top of the input until text is typed in:
Once text is typed in:
This problem is also described on this Stack Overflow post.
The problem stems from using line-height in the input field. The problem seems to go away if you just use padding or height. However, using line-height in conjunction with height is one of the best ways to get consistent cross-browser input field vertical alignment.
Thankfully, Chrome has fixed this bug as of version 39.
If you use line-height in your input fields, you can choose to either ignore the bug until Chrome fixes it, or make a quick-fix to your input fields (removing the line-height) until Chrome 39 comes out.
Once text is typed in:
This problem is also described on this Stack Overflow post.
The problem stems from using line-height in the input field. The problem seems to go away if you just use padding or height. However, using line-height in conjunction with height is one of the best ways to get consistent cross-browser input field vertical alignment.
Thankfully, Chrome has fixed this bug as of version 39.
What To Do
If you use line-height in your input fields, you can choose to either ignore the bug until Chrome fixes it, or make a quick-fix to your input fields (removing the line-height) until Chrome 39 comes out.
