Why does my Chrome input border disappear when zooming?

Troubleshooting Chrome Border Disappearing on Zoom

The concern raised in this forum thread involves the disappearance of input borders in Chrome when users zoom in or out. While the problem may not be prevalent for all users, it affects a specific form (available at http://jsfiddle.net/TKb6M/91/).

When zoomed to 90%, for instance, the original borders vanish, leaving the input field visually unadorned. The user also mentions including tags based on recommendations from another thread, which aims to allocate horizontal space efficiently.

The question arises whether this is an issue with the CSS or a specific behavior of Chrome. Additionally, the user seeks solutions to prevent this undesired effect.

Proposed Solution

While the original poster may have addressed the concern, an astute user has stumbled upon a straightforward solution. By modifying the CSS code, the issue can be resolved.

Original CSS

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

Modified CSS

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

This modification effectively replaces the explicit "1px" value with "thin," a relative unit. As a result, the border retains a consistent appearance regardless of zoom level.

The solution was sourced from a Google product forum thread: https://productforums.google.com/forum/#!topic/chrome/r1neUxqo5Gc.

Implementing this simple alteration should alleviate the border disappearing issue in Chrome, ensuring a visually consistent user experience while zooming.

The above is the detailed content of Why does my Chrome input border disappear when zooming?. For more information, please follow other related articles on the PHP Chinese website!