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

I gathered that this might be happening: "You are forcing Chrome to do subpixel calculus, and this usually has strange behaviours." from a similar but slightly different question here: Borders disappear in Chrome when I zoom in

After much trial, error, and research my fix was to add a 1px margin (or buffer if you will) to the child elements with the background color. This was a slight tradeoff as there was a 1px gap between the border and the background, but it was a tradeoff I was comfortable with.

Codepen with the fix: https://codepen.io/richfinelli/pen/PQxbed?editors=1100

.card__container {
  border: 1px solid black;
  display: flex;
  flex-direction: column;
  width: 300px;
  margin: 10px auto;
  align-items: stretch;
  font-family: "source code pro";
  color: darken(#cccccc, 60%);
}
.card__header {
  background-color: lighten(hotpink, 10%);
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 1px; //added this
  h1 {
    font-size: 2rem;
  }
}
.card__value {
  align-self: center;
  padding: 50px 0;
  color: hotpink;
  font-size: 2rem;
}
.card__footer {
  padding: 10px;
  font-family: Arial;
  font-style: italic;
  font-size: .8rem;
  background-color: lighten(blue, 45%);
  margin: 1px; //and added this
}

The 1px margin or buffer was enough I believe to not force the browsers to do the "subpixel calculus" and thus not remove the border on some sides when the browser is zoomed out.