CSS animations not working properly on macOS - html

Question

I'm trying to create a flipbox with basic HTML and SCSS.
It's working as intended on Windows machines on every browser but I can't get it to work properly on Mac machines. It's not browser specific because it won't work properly on any browser on a Mac. The animation with the text is flickering and also the text disappears after the animation is done. I tried using different webkit solutions after Googling for a while, but none seem to fix my issue. I really hope someone here could help me out since I have no clue anymore on what is causing this issue. I do know that it has to do with the way it's getting rendered.
<div class="container">
<div class="row">
<div class="col-12 col-md-6 col-lg-3 d-flex team-card">
<!-- card container -->
<div class="extraSpacing">
<!-- inner -->
<div class="content front">
<div class="name text-center mx-auto mt-auto">
<p>Name</p>
</div>
<div class="function text-center mx-auto mt-auto">
<p style="text-transform:uppercase;font-size:12px;">Function</p>
</div>
<div class="social text-center">
<i class="fa fa-instagram"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-facebook"></i>
<i class="fa fa-linkedin"></i>
</div> <!-- /social -->
</div> <!-- /content front -->
<div class="back">
<p>Back card content</p>
</div>
</div> <!-- /inner -->
</div> <!-- /card container -->
</div> <!-- /row -->
#teamWrapper {
margin: 75px 0;
.team-card:hover .extraSpacing {
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
}
.team-card {
position: relative;
margin-bottom: 20px;
padding: 0 8px;
transition: all .6s linear;
-webkit-transition: all .6s linear;
perspective: 1000px;
-webkit-perspective: 1000px;
.extraSpacing {
box-sizing: border-box;
width: 100%;
height: 365px;
background-size: cover;
background-repeat: no-repeat;
margin: 0;
transition: transform 0.8s;
-webkit-transition: transform 0.8s;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
}
.social {
margin-top: 15px;
i {
color: white;
margin: 0 10px;
font-size: 20px;
transition: .2s all;
-webkit-transition: .2s all;
&:hover {
color: red;
-webkit-transition: .2s all;
transition: .2s all;
}
}
}
.front {
position: absolute;
bottom: 30px;
left: 0;
right: 0;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.back {
position: absolute;
z-index: 10;
background: white;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
transform: rotateY(180deg);
height: 100%;
display: flex;
p {
color: black;
font-size: 11px;
}
}
p {
color: white;
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;
}
}
The URL is: https://ikycreative.ikydev.nl/over-ons/ and the problem is with the team cards at the bottom of the page. It should flip over with a white background and black text, which it does on Windows (Chrome, Firefox) but not on Mac (Safari, Chrome, Firefox). It flickers a lot on Mac.
Many many thanks in advance, any help would be greatly appreciated since I am clueless.
JSFiddle:
https://jsfiddle.net/zLcjy4em/1/