Borders disappear in Chrome when I zoom in

Question

I have this really simple form: http://jsfiddle.net/TKb6M/91/. Sometimes, when I zoom in or out using Chrome, the input borders disappear. For example, when I zoom to 90% I

Answer 1

You are forcing Chrome to do subpixel calculation, and this usually has strange behaviours.

If you change the height of the input to 30px, then a 90% zoom works ok (because this is 27px), but a zoom of 75% not (because this is 22.50 px).

You can also avoid this by giving the border a width of 3px. In this case, you will see that the borders width is different in different places .

Anyway, the very best solution is to give more space around the inputs so that the border can be drawn cleanly even if it is in a subpixel position.