htmlcssborderzooming

Borders disappear in Chrome when I zoom in


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:

enter image description here

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

  • 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