Interesting Css rendering issue on zoom : browser renders a space gap between containers while zooming, occurs in every browser, but not in Firefox

Question

I have both interesting and strange issue with css styles and zooming in and out in browser.

I created a material ui card with which have its background-color changed on click with animation.

Animation works fine, but if you zoom page in or out, browser renders a gap in some zoom value percentages. What is more, the gap appears randomly on some cards, while in others everything is fine.

I have seen some similar cases while looking for solution, but none of them works, there are even voices that you cant do much with such kind of problem. Examples: Rendering (rounding?) issue in Chrome when zooming IE11 draws small line between positioned elements white space between image tiles when zooming

Any advice or help will be welcome. I am fighting with this for a couple of days :P

I have prepared some demo https://codesandbox.io/s/animate-divs-forked-1b3v4g. It seems that making a container simple div or a card from material ui and using border-radius: 0px makes no difference, the gap still occurs, mostly in browsers other than mozilla firefox. Just click container, zoom in or out in chrome or edge and you will see it. EDIT: changing border-bottom as even pixel number seems to help at some zooms level (50%?) but not all. On firefox everything is fine.

Answer 1

Try to remove the border property in BigDiv class and create the second pseudo-class. I think it might be a blink engine rendering issue.

BigDiv class

display: flex;
min-width: 220px;
height: 100%;
position: relative;
padding: ${theme.spacing(2, 0)};
border-bottom: orange 5px solid; /* remove this */
background-color: transparent;
cursor: pointer;
text-align: center;
transition-delay: 0.5s;
will-change: transform;

/* Add this */
::before {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: orange;
}

document.addEventListener('DOMContentLoaded', function() {
  const click = document.querySelector('.big');
  const click2 = document.querySelector('.big2');

  click.addEventListener('click', e => {
    e.currentTarget.classList.toggle('active');
  });
  click2.addEventListener('click', e => {
    e.currentTarget.classList.toggle('active');
  });
});

.big,
.big2 {
  width: 220px;
  height: 100%;
  position: relative;
  padding: 1rem 2rem;
  background-color: transparent;
  cursor: pointer;
  text-align: center;
  transition-delay: 0.5s;
  will-change: transform;
}

.big {
  border-bottom: orange 4px solid;
}

.big::after,
.big2::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: orange;
  animation: out 0.5s ease-in-out forwards;
  transform-origin: bottom center;
}

.big2::before {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: orange;
}

.big.active::after,
.big2.active::after {
  animation: in 0.5s ease-in-out forwards;
}

.second {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  z-index: 1;
}

@keyframes in {
  0% {
    transform: scaleY(0);
    background-color: transparent;
  }
  100% {
    transform: scaleY(1);
    background-color: orange;
  }
}

@keyframes out {
  0% {
    transform: scaleY(1);
    background-color: orange;
  }
  100% {
    transform: scaleY(0);
    background-color: transparent;
  }
}

<div class="big">
  <div class="second">
    <p>Click to animate with border</p>
  </div>
</div>
<div class="big2">
  <div class="second">
    <p>Click to animate  pseudo-class</p>
  </div>
</div>