CSS Marquee animation breaks in Safari when array of elements inside marquee-wrapper change

Question

In my Angular project I made a full screen marquee animation where participants of the giveaway are being added to the array in real time every time someone buys a lottery ticket (single person can buy 100 tickets at once). So everything works fine in Google, but in Safari when I buy ticket, participants (html element) start to disappear one by one when it reaches left side of the screen. I don't know what is the problem, does anybody had similar problem?

Here is my code:

component.ts

@Input() set items(data: any) {
    this.state.participants = data;
  }

html

<div class="raffle-section">
  <h1>{{'Raffle Participants' | translate}}</h1>
  <h3 *ngIf="state.selectedParticipantIndex">{{"winner" | translate }}</h3>
  <div class="box-wrapper" #boxWrapper [style]="state.participants.length > 100 ? '--time:500s' : '--time:60s'" *ngIf="state.participants.length > 0">
  <div class="box-wrap" [ngClass]="{'animate': shouldStopMarquee, 'accelerate': state.shouldAccelerate}">
    <div class="participant-box" *ngFor="let item of state.participants; let i = index" [ngClass]="{ 'highlight': i === state.selectedParticipantIndex}">
      <img class="profile-image" *ngIf="!item.image" src="/assets/images/profile.svg" alt="">
      <img class="profile-image" *ngIf="item.image" [src]="item.image.fileURL" alt="">
      <p>{{ item.nickName }}</p>
      <small>{{ item.fullName }}</small>
      <img *ngIf="i === state.selectedParticipantIndex" src="/assets/icons/medal.svg" alt="" class="selected-icon">
    </div>
  </div>
</div>
</div>

scss

.raffle-section {
  width: 100%;
  padding: 50px 0;
  background: var(--bg);
  text-align: center;
  position: relative;
     h3 {
      color: #36B894;
      position: absolute;
      left: 50%;
      transform: translate(-50%, 0);
     }
  .box-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 50px 0;
    position: relative;
    animation: name duration timing-function delay iteration-count direction fill-mode;
    .box-wrap {
      display: inline-flex;
       animation: marqueeAnimation var(--time) linear infinite;
       -webkit-animation: marqueeAnimation var(--time) linear infinite;
      gap: 40px;
      transition: all 0.5s ease-in-out;
      &.accelerate {
        animation: marqueeAnimation 20s linear infinite;
        -webkit-animation: marqueeAnimation 20s linear infinite;
      }
      &.animate {
        animation: none;
        -webkit-animation: none;
      }
      &.showme {
        display: none;
      }
    }
    .participant-box {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 270px;
      min-width: 250px;
      height: 310px;
      border-radius: 24px;
      background: #fff;
      box-shadow: rgba(149, 157, 165, 0.2) 0px 3px 12px;
      // margin: 0 20px;
      &.highlight {
        background: #36B894;
        position: absolute;
        bottom: 50%;
        left: 50%;
        width: 290px;
        min-width: 250px;
        height: 330px;
        transform: translate(-50%, 50%);
      }

      p {
        margin: 5px;
        font-size: 20px;
        font-weight: 600;
      }
      small {
        font-size: 16px;
        color: var(--label-color);
      }
      .profile-image {
        width: 150px;
        height: 150px;
        margin-bottom: 20px;
      }
    }
  }
}

I tried changing duration of the animation, i think the problem is somewhere there, but that does not work.