Flip Boxes won't work on Mac, but are working on phones - html

Question

I thought I had everything covered, but I'm now having issues with flip boxes working on Mac. I was able to make them compatible with different browsers on phones. I had someone with a Mac say that they were having problems with the animation. I heard that they saw a weird blinking and can see the front of the card through the back. I'm not sure what I'm missing. The last time I had this issue was with iOS, but I was just missing one line of code. Any suggestions? Honestly, I'm winging this as I go and can use any guidance.
body {
font-family: 'Montserrat', sans-serif;
font-weight: 300;
/* black */
overflow-y: hidden;
/* Hide vertical scrollbar */
overflow-x: hidden;
/* Hide horizontal scrollbar */
}
.grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
justify-content: center;
align-items: center;
grid-gap: 10px;
}
#media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
/*Desktop*/
.grid {
grid-template-columns: repeat(1, 8fr);
}
}
.flip-card {
background-color: transparent;
width: 275px;
height: 250px;
perspective: 1000px;
}
.flip-card-inner {
border-style: hidden;
position: relative;
width: 100%;
height: 100%;
text-align: left;
transition: transform 0.6s;
transform-style: preserve-3d;
}
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}
.flip-card-front,
.flip-card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.flip-card-front {
background-color: black;
color: #152939;
text-align: center;
}
.flip-card-back {
background-color: #152939;
color: white;
transform: rotateY(180deg);
line-height: 1.25;
}
li {
margin: 10px 0;
}
.vertical-center {
margin: 0;
position: absolute;
top: 45%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.container {
position: relative;
text-align: center;
color: white;
}
.centered {
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
}
img {
opacity: 0.45;
}
<link href=https://fonts.googleapis.com/css?family=Montserrat:400,500,700,900|Ubuntu:400,500,700 rel="stylesheet">
<section id="team">
<div class="container">
<div class="grid">
<!-- #stakeholder benefits -->
<!-- #regulatory agencies -->
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<div class="container">
<img src="https://i.ibb.co/26CVgtv/EMA-building-1024px.png" alt="EMA-building-1024px" border="0" width="275px" height="250px" opacity="0.4">
<h2 class="centered">Regulatory<br />Agencies</h2>
</div>
</div>
<div class="flip-card-back">
<div class="vertical-center">
<ul>
<br />
<li style="font-size:15px;">Real-time monitoring & auditing</li>
<li style="font-size:15px;">No need to go on-site to   review necessary paperwork</li>
<li style="font-size:15px;">Access to digital database on contamination levels, origin and destination(s)</li>
</ul>
</div>
</div>
</div>
</div>
<!-- #generators -->
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<div class="container">
<img src="https://i.ibb.co/vqw9456/ba2679-3a022e1d9d7946beaf7e22d07.png" alt="ba2679-3a022e1d9d7946beaf7e22d07" border="0" width="275px" height="250px">
<h2 class="centered">Generators</h2>
</div>
</div>
<div class="flip-card-back">
<div class="vertical-center">
<ul>
<br />
<li style="font-size:15px;">Access to real-time project updates</li>
<li style="font-size:15px;">Limit exposure to regulatory penalties</li>
<li style="font-size:15px;">Accurately forecast and   reduce costs with start-to-finish project insights</li>
<li style="font-size:15px;">Cost-effective</li>
</div>
</div>
</div>
</div>
<!-- #environmental consultants -->
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<div class="container">
<img src="https://i.ibb.co/QvN3jC5/Environmental-Consultants-SESA-e1510386416577.jpg" alt="Environmental-Consultants-SESA-e1510386416577" border="0" width="275px" height="250px">
<h2 class="centered">Environmental Consultants</h2>
</div>
</div>
<div class="flip-card-back">
<div class="vertical-center">
<br />
<ul>
<li style="font-size:15px;">Easier vetting to review credentials of necessary companies</li>
<li style="font-size:15px;">Single and centralized repository to access all   relevant documents</li>
</ul>
</div>
</div>
</div>
</div>
<!-- #remediation consultants -->
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<div class="container">
<img src="https://i.ibb.co/0KxTnM9/remediation-2-722x368.jpg" alt="remediation-2-722x368" border="0" width="275px" height="250px">
<h2 class="centered">Certified Remediation Contractors</h2>
</div>
</div>
<div class="flip-card-back">
<div class="vertical-center">
<ul>
<br />
<li style="font-size:15px;">Digital manifests save time, space, energy and money</li>
<li style="font-size:15px;">Improve trucker   management</li>
<li style="font-size:15px;">Easily post jobs in need of additional compliant     truckers</li>
</ul>
</div>
</div>
</div>
</div>
<!-- #remediation professionals -->
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<div class="container">
<img src="https://i.ibb.co/pWkWdMx/Services-Header-REM1.jpg" alt="Services-Header-REM1" border="0" width="275px" height="250px">
<h2 class="centered">Remediation Professionals<br />(i.e. LSRPs)</h2>
</div>
</div>
<div class="flip-card-back">
<div class="vertical-center">
<ul>
<li style="font-size:15px;">Minimize paperwork by receiving necessary documents in the cloud</li>
<li style="font-size:15px;">Streamlined updates to Regulatory Agencies</li>
</ul>
</div>
</div>
</div>
</div>
<!-- #material truckers -->
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<div class="container">
<img src="https://i.ibb.co/jktCcCh/construction-materials-being-transported-through-dump-truck-hauling-services.jpg" alt="construction-materials-being-transported-through-dump-truck-hauling-services" border="0" width="275px" height="250px">
<h2 class="centered">Material Truckers</h2>
</div>
</div>
<div class="flip-card-back">
<div class="vertical-center">
<br />
<ul>
<li style="font-size:15px;">Easier hiring process with ability to upload credentials and list references for new   jobs</li>
<li style="font-size:15px;">Eliminates need to call for or save paper manifest receipts</li>
<li style="font-size:15px;">Faster pay through direct invoicing</li>
<li style="font-size:15px;">Post available trucks for hire</li>
</ul>
</div>
</div>
</div>
</div>
<!-- #disposal facilities -->
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<div class="container">
<img src="https://i.ibb.co/BnwcyRy/construction-site-waste.jpg" alt="construction-site-waste" border="0" width="275px" height="250px">
<h2 class="centered">Disposal Facilities</h2>
</div>
</div>
<div class="flip-card-back">
<div class="vertical-center">
<br />
<ul>
<li style="font-size:15px;">Go green - no need to buy paper and printer cartridges   to print paper manifests</li>
<li style="font-size:15px;">Easier manifest delivery - assign electronically to truckers ahead of time, no need to sign paper manifests at origin and destination</li>
</ul>
</div>
</div>
</div>
</div>
<!-- #material testing labs -->
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<div class="container">
<img src="https://i.ibb.co/wckqzpt/R0cd7e9fd21b0182c7cfba5b6c278ab7a.png" alt="R0cd7e9fd21b0182c7cfba5b6c278ab7a" border="0" width="275px" height="250px">
<h2 class="centered">Material Testing Labs</h2>
</div>
</div>
<div class="flip-card-back">
<div class="vertical-center">
<ul>
<br />
<li style="font-size:15px;">Share results faster by integrating with TerraTrackr database</li>
<li style="font-size:15px;">Upload testing lab results <br /> and assign a unique project <br /> ID for easy organization</li>
</ul>
</div>
</div>
</div>
</div>

Answer 1

Answer: justify-content: center;
(You had a typo)

Answer 2

I ended up adding backface visibility to the image and it's all good!