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 get:

Naturally, your mileage may vary.

In case you're wondering about those <span> tags, I added them following the recommendation at How do I make an input element occupy all remaining horizontal space?.

Is there a problem with my CSS or is this a Chrome bug? It seems to work fine on Firefox. What can I do to avoid this behavior?

Thanks.

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.

Answer 2

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 3

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 4

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.

Answer 5

I had a similar issue with chrome in 2018 - the top border was missing on inputs and textareas. The fix was to specify the top border in css simply as

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

I can't explain why that was needed, and it was only losing the borders in certain places, but at least that was a quick workaround.

Answer 6

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 7

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.