CSS border disappears when child element has a background color AND browser is zoomed out less than 100%

Question

I have an element with a 1px border and a child element that has a background color causing the parent element\'s border to disappear when I zoom out my browser\'s zoom to 70-80

Answer 1

It sounds like number rounding issues due to the browser's subpixel calculus to me, too. However, I do see the issue on Chrome/Mac if you adjust different zoom levels and viewport widths you can see the issue manifest in different ways:

Chrome/Mac 125% Zoom / 1196px viewport Gap between header and footer backgrounds and left border:

Chrome/Mac 90% Zoom / 1181px viewport Header and footer backgrounds overlap right border:

A non-design impacting fix is to create the border using positioning in a pseudo-element:

.card__container {
    position: relative; // ADDED 
    // border: 1px solid black; // REMOVED
    display: flex;
    flex-direction: column;
    width: 300px;
    margin: 10px auto;
    align-items: stretch;
    font-family: "source code pro";
    color: darken(#cccccc, 60%);

    // ADDED
    &::after {
         content: '';
         position: absolute;
         top: 0;
         right: 0;
         bottom: 0;
         left: 0;
         border: 1px solid #000;
    }
}

Codepen: https://codepen.io/danbrady/pen/QQYyzM (Tested in IE11, Chrome (Mac & Win7), Firefox, and Safari.

Although this is more code and, admittedly, a little quirky, it doesn't change the original design intent. Also, you might consider abstracting it into a mixin or separate utility class.

(P.S. Came here from your blog post. You've inspired me to not lurk (at least for today). :^)