Elements on page flicker with webkit-transform after the background video plays

Question

The elements on the page start to flicker after the background video plays.

The website is: https://hydrovyn.com

Here is a screen-capture I took of this happening: https://youtu.be/oQQrT-f4EIA?si=7VVvoqxQ1YtUgyH2

This started happening after I used an animation of 3D rotating text on the header using webkit transform.

Website is on WordPress. The 3D text code inserted is inline.

This is happening on Safari only. Tested as happening on Safari (17.2.1) on MacOS. Doesn't happen on Chrome.

Below is the code used for the 3D text:

<div  class="home1 col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <h3 id="resizing-h3" class="" >
                    <span>
                            <div class="stage">
                                <div class="cubespinner">
                                    <div class="face1">Nutrient</div>
                                    <div class="face2">Enriched</div>
                                    <div class="face3">Alkaline</div>
                                    <div class="face4">Ionised</div>
                                </div>
                            </div>
                        </span>
                    </h3>
                </div>
                <style>
                 .home{
    width:100%;
}
.home1:before{
    content: ' ';
    background-color:#fff;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}
@media (min-width:768px){
.home1 h3{
    position:absolute;
    font-size:74px;
    text-align: left;
    color:#009393;
    margin-left:0%;
    font-weight:700;
    margin-top:10px;
}}
@media (max-width:1024px) and (min-width:768px){
.home1 h3{
    position:absolute;
    font-size:74px;
    text-align: left;
    color:#009393;
    margin-left:0%;
    font-weight:700;
}}
@media (max-width:767px){
.home1 h3{
    position:absolute;
    font-size:74px;
    text-align: left;
    color:#009393;
    margin-left:0%;
    font-weight:700;
    margin-top:20px;
}}

.stage{
    width: auto;
    margin-top: 15px;
    height: 100px;
  }
  .cubespinner{
    -webkit-animation-name:spincube;
    -webkit-animation-timing-function:ease-in-out;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-duration:8s;
    animation-name:spincube;

    animation-timing-function:ease-in-out;
    animation-iteration-count:infinite;
    animation-duration:8s;
    -webkit-transform-style:preserve-3d;
    -moz-transform-style:preserve-3d;
    -ms-transform-style:preserve-3d;
    transform-style:preserve-3d;
    -webkit-transform-origin:40px 40px 0;
    -moz-transform-origin:40px 40px 0;
    -ms-transform-origin:40px 40px 0;
    transform-origin:40px 40px  0;
  }
  .cubespinner div{
      position:absolute;
      width:400px;
      height:80px;
      text-align:left;
      color:#109393;
      font-family:'Raleway', sans-serif;
      font-size:74px;
      font-weight:700;
      }
  .cubespinner .face1{
      color:#f1c40f;
      -webkit-transform:translateZ(40px);
      -moz-transform:translateZ(40px);
      -ms-transform:translateZ(40px);
      transform:translateZ(40px);
      -webkit-backface-visibility: hidden;
      }
    .cubespinner .face2{
        color:#3D9394;
        -webkit-transform: rotateX(90deg) translateZ(40px);
        -moz-transform: rotateX(90deg) translateZ(40px);
        -ms-transform: rotateX(90deg) translateZ(40px);
        transform: rotateX(90deg) translateZ(40px);
        -webkit-backface-visibility: hidden;
    }
    .cubespinner .face3{
        color:#f85555;
        -webkit-transform:rotateX(180deg)  translateZ(40px);
        -moz-transform:rotateX(180deg)  translateZ(40px);
        -ms-transform:rotateX(180deg)  translateZ(40px);
        transform:rotateX(180deg)  translateZ(40px);
        -webkit-backface-visibility: hidden;
        }
    .cubespinner .face4{
        color:#fff;
        -webkit-transform:rotateX(270deg) translateZ(40px);
        -moz-transform:rotateX(270deg) translateZ(40px);
        -ms-transform:rotateX(270deg) translateZ(40px);
        transform:rotateX(270deg) translateZ(40px);
        -webkit-backface-visibility: hidden;
    }


/*Cubical Flipping or rotation*/
@-webkit-keyframes spincube {
    from,to  { -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);}
    15%      { -webkit-transform: rotateX(90deg);}
    25%      { -webkit-transform: rotateX(90deg);}
    40%      { -webkit-transform: rotateX(180deg);}
    50%      { -webkit-transform: rotateX(180deg);}
    65%      { -webkit-transform: rotateX(270deg);}
    75%      { -webkit-transform: rotateX(270deg);}
    95%      { -webkit-transform: rotateX(360deg);}
    100%      { -webkit-transform: rotateX(360deg);}
  }@keyframes spincube {
    from,to {
      -webkit-transform: rotateX(0deg);
      -moz-transform: rotateX(0deg);
      -ms-transform: rotateX(0deg);
      transform: rotateX(0deg);
    }
    15% {
      -webkit-transform: rotateX(90deg);
      -moz-transform: rotateX(90deg);
      -ms-transform: rotateX(90deg);
      transform: rotateX(90deg);
    }
    25% {
      -webkit-transform: rotateX(90deg);
      -moz-transform: rotateX(90deg);
      -ms-transform: rotateX(90deg);
      transform: rotateX(90deg);
    }
    40% {
      -webkit-transform: rotateX(180deg);
      -moz-transform: rotateX(180deg);
      -ms-transform: rotateX(180deg);
      transform: rotateX(180deg);
    }
    50% {
      -webkit-transform: rotateX(180deg);
      -moz-transform: rotateX(180deg);
      -ms-transform: rotateX(180deg);
      transform: rotateX(180deg);
    }
    65% {
      -webkit-transform: rotateX(270deg);
      -moz-transform: rotateX(270deg);
      -ms-transform: rotateX(270deg);
      transform: rotateX(270deg);
    }
    75% {
      -webkit-transform: rotateX(270deg);
      -moz-transform: rotateX(270deg);
      -ms-transform: rotateX(270deg);
      transform: rotateX(270deg);
    }
    90% {
      -webkit-transform: rotateX(360deg);
      -moz-transform: rotateX(360deg);
      -ms-transform: rotateX(360deg);
      transform: rotateX(360deg);
    }
    100% {
      -webkit-transform: rotateX(360deg);
      -moz-transform: rotateX(360deg);
      -ms-transform: rotateX(360deg);
      transform: rotateX(360deg);
    }
                </style>

Tried using -webkit-backface-visibility: hidden; but didn't help.