Border height changes pixel size when zoomed in

Question

The height of the border around an element on my page is changing heights when you zoom in on the page. The border is defined as 1px. I am seeing the resizing issue on Chrome and IE but not Firefox. What is the source of this problem? The relevant css is below.

Resizing issue shown on Chrome

.highlightHeader{
    border-bottom-color: rgb(184, 34, 46);
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-top-color: rgb(184, 34, 46);
    border-top-style: solid;
    border-top-width: 1px;
}

Answer 1

Zooming in/out (using Ctrl+/Ctrl-) is not part of HTML spec. It's something browser manufacturers have developed to let users make the contents bigger/smaller for increased readability or birds-eye-view of the page layout while giving up on pixel-perfect details.

While doing this, content sizes are altered and each browser tries its best at keeping the original aspect as close to original, but zoomed. How each one does it is not controllable in any way. It's a level that's not accessible to the web page/app.

When a client tells you they want the zoomed page to match the design of the non-zoomed one, show them the door and say:

"Please let me show you the door. Pay close attention to its apparent size. You will notice that, as you get closer, its apparent size increases. You are asking me to keep the apparent size constant while you are getting closer to it. Now, please decide if you would you like to use it."

---

If you want to create a custom zooming mechanism for your app/page, that's entirely possible and you can specify which elements/properties to change and which to remain unchanged. But that's not going to prevent people from using the native browser zoom controls (mentioned above) and you don't have any way of controlling how the browser renders the contents of your page while the page is zoomed. It's done from outside the Document (page) and that's where your control ends.