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

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.