Why are my HTML elements invisible in iOS Safari? - html

Question

On my site, there is a scrolling container, which contains static cards that display certain data. The user scrolls through the cards one-by-one. On iOS Safari, only the first 2 cards are displaying, and as I scroll through, the other cards are invisible.
From the screenshot you can see that the element is there on the page, but invisible. You can even select the text on the element as if its there. The HTML and CSS behind every card is exactly the same.
.rc_eid-card {
position: relative;
width: 202px;
min-width: 202px;
height: 282px;
border-radius: 8px;
background: white;
padding: 20px;
box-sizing: border-box;
z-index: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
scroll-snap-align: start;
margin-right: 16px;
&:last-child {
margin-right: 0;
}
img {
width: 40px;
margin-bottom: 16px;
}
h3 {
font-family: $font-base;
font-size: 32px;
font-weight: 700;
color: #BE67A1;
}
&--text {
font-size: 16px;
line-height: 1.375;
color: $color-grey--dark;
}
&--bottom {
position: absolute;
bottom: 20px;
width: 100%;
text-align: center;
font-size: 12px;
color: $color-grey--dark;
}
}
This is the CSS for the container if that matters as well:
.rc_eid-container--scrolling {
display: flex;
justify-content: center;
overflow: auto;
max-width: 1074px;
width: 100%;
margin: auto;
padding: 8px;
scroll-padding: 8px;
scroll-snap-type: x mandatory;
box-sizing: border-box;
filter: drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.15)) drop-shadow(0px 4px 10px rgba(0, 0, 0, 0.1));
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
&::-webkit-scrollbar {
display: none;
}
#media (max-width: 1073px) {
justify-content: flex-start;
}
}
Thanks in advance!