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.

Solution 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

Solution 2

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.

Solution 3

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.

Solution 4

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.

Solution 5

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.

View more solutions

Comments

[BairDev]

I've also seen 1px of padding being removed on zoom level 90%. It was a padding rule on a <table> element.

[posfan12]

I've also noticed that if your border is style "double" then one of the "double" lines may disappear.

[Luís Pureza]

Thanks, but the problem seems to persist.

[Luís Pureza]

The overflow:hidden bit is necessary to allow the input's width to go up to 100%, which is something I'd like to keep.

[GraafM]

I had a similar problem, the border on the right side of the button was gone when zooming in/out. Adding the padding around the button fixed the border for me. Thanks

[Will P.]

Much better and more consistent solution

[dapperdan1985]

My problem was the opposite. Borders disappeared on bootstrap boxes when I zoomed OUT. This solution fixed it.

[ESR]

Why doesn't it just round up to the nearest pixel?

[Hassan Ila]

This should be the accepted answer now. It worked better than I expected. Huge thank you

[El Anonimo]

For me the set height: 32px made the border disappear. I got the desired height of the <select> element set padding: 0.2rem on it.

[pramodpxi]

Hi @ESR, I want to implement this, but in my case I have dropdown which has 10 vals and after 5 I am using overflow: auto. In this case I am not sure how can I give more padding at bottom. Only bottom border is disappearing in my case.

[iFederx]

In my case, 1px doesn't disappear on Firefox, bit does it in Chrome. With 1.5px the behavior is right in Chrome, but Firefox shows 2px width...

[traxium]

In my case borders on Chrome disappeared on 100% zoom and appeared while zooming out or zooming in

[gene b.]

thin doesn't work!!! no difference from 1px !

[gene b.]

Whatever you do with border-width just shifts the problem to other lines in your table. Any value that you give it may fix it on that one line, but creates the issue on other lines. I showed this in my thread: stackoverflow.com/questions/71789886/… And no, there's nothing "magic" about 1.5, it doesn't fully work either.