css - why is the background animation glitching over the foreground box on some browsers?

Question

I am having a peculiar issue with a page in which an animated background item at times overlaps over the element in front.

I have seen this happen only on the Samsung Internet Browser (v13.2.1.70) so far. I can't replicate it on chrome for example (I didn't test many other browsers either).

Here's a codepen of the issue: https://codepen.io/antizio/pen/qBqbqVX.

HTML

<div id="scene">
  <div id="bg"></div>
  <div id="card"></div>
</div>

CSS

#scene {
  width: 500px;
  height: 500px;
  background: lightgreen;
}

#bg {
  position: absolute;
  left: 100px;
  top: 260px;
  width: 100px;
  height: 100px;
  background: red;
  z-index: 10;
}

#card {
  position: absolute;
  width: 300px;
  height: 300px;
  background: radial-gradient(rgba(140, 193, 63, 0.5) 0%, #138849 70%);
  transform: scale3d(0,0,1);
  animation: scaleup infinite ease-in 2s;
}

@keyframes scaleup {
  from {
    transform: scale3d(0, 0, 1);
  }
  to {
    transform: scale3d(1,1,1);
  }
}

I have seen it sometimes behaving correctly sometimes overlapping, all just by changing the scrolling position of the page :/

I managed to fix the issue by adding an "empty" transform to the foreground element, however that's not ideal. I based this on remnants of browser behaviors from a long time ago.

Does anybody have any insight on this? Why does this happen? Is there a better way to fix this?

question from:https://stackoverflow.com/questions/66054119/why-is-the-background-animation-glitching-over-the-foreground-box-on-some-browse

Answer 1

Waitting for answers