H3XED

Google Chrome 38 Text Input Caret Vertical Position Off

Nov 14, 2014   Web and Internet   Nick Vogt   Comments
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:

Chrome input offset

Once text is typed in:

Chrome input offset

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.
Share This Post
Twitter
You May Like
Google Chromecast
Google Chromecast
See More Details

Comments (0)

Share This Post
Twitter
You May Like
Google Chromecast
Google Chromecast
See More Details
H3XED © Nick Vogt   RSS   Policies   Twitter