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

I'm pretty sure that Luís Pureza has solved his issue, but I found a really easy way to solve it changing only this:

If you have a table border like this one:

INPUT,TEXTAREA {
border-top: 1px solid #aaa
}

Change it to this one:

INPUT,TEXTAREA {
border-top: thin solid #aaa
}

I found this solution across this link: https://productforums.google.com/forum/#!topic/chrome/r1neUxqo5Gc

I hope it helps

Answer 2

It's because your setting a fixed height, and when zooming the input is growing larger than that height, making the border disappear. Use line-height and padding to get the desired height instead - see updated Fiddle

Update: Ignore what I said, it's because you're setting overflow:hidden on your span, removing that should do the trick. Might result in a need to change width of input though.

On a side note; you're making your span a block element which is fine and works, but it looks a bit bad. Try using block elements, like a instead of changing an inline element to a block, if possible.

Answer 3

In case overflow: hidden is neccessary , mention overflow: hidden only for the browser you are facing the width issue . In other browser, metion display: flex so that the width is automatically taken correct and also, so that on zooming in/out the borders do not disappear.

For example : Width was not correct in my case only for IE, so I mentioned :

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.spanStyles {
display: block;
overflow: hidden;
}
}

And the zooming in/out issue was occuring in firefox and chrome, so I mentioned

.spanStyles {
 display : flex;
}

this resolved my issue in all browsers.

Answer 4

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.

Answer 5

I had the same problem with a bordered div wrapping borderless input , and all the great answers here does not helped me.

Finally, adding:

overflow: auto; 

to the div element (the one with the problematic border) did the trick.

Answer 6

I know I'm late in the game, but fudging it a bit and set the border width to 1.5px seems to do the trick every time.