Неожиданная ошибка CSS возникает конкретно на iPhone ⇐ CSS

[Гость]

Я работал над частью фотографии, где использовал сетку и обтравочный контур, и она выглядит фантастически на всех устройствах, кроме iPhone. Интересно, что он отлично работает на Mac и iPad, но, к сожалению, не отображается должным образом на iPhone (мобильном). На Android на iPhone
HTML

Код: Выделить всё

   


Stars of the month



[img]assets/images/all-members-img/members-of-the-month/Maria.webp[/img]

Maria Saleem




[img]assets/images/all-members-img/members-of-the-month/areej.webp[/img]

Areej Al-Qwaqneh




[img]assets/images/all-members-img/members-of-the-month/Asya AbdelFattah.webp[/img]

Asya AbdelFattah




[img]assets/images/all-members-img/members-of-the-month/bayan.webp[/img]

Bayan Hamlan




[img]assets/images/all-members-img/members-of-the-month/may.webp[/img]

May Talal




[img]assets/images/all-members-img/members-of-the-month/Moatasem.webp[/img]

Moatasem Al-Naimat




[img]assets/images/all-members-img/members-of-the-month/Tasneem.webp[/img]

Tasneem Dwaikat 




[img]assets/images/all-members-img/members-of-the-month/Maryam.webp[/img]

Mariam Abaza




[img]assets/images/all-members-img/members-of-the-month/Toleen.webp[/img]

Toleen Abu-Adi




[img]assets/images/all-members-img/members-of-the-month/Yara.webp[/img]

Yara Yaghi

CSS

Код: Выделить всё

/*member of the months*/
.member-of-the-months {
padding: var(--section-top-bottom-padding) 0;
position: relative;
}

.member-of-the-months>.container {
padding: 0 15px;
}

@media (min-width: 992px) {
.member-of-the-months__rows-wrapper {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(3, auto);
gap: 1rem;
}

.member-of-the-month-polygon:nth-child(1),
.member-of-the-month-polygon:nth-child(2),
.member-of-the-month-polygon:nth-child(3) {
grid-row: 1 / 2;
margin-left: 53%;
}

.member-of-the-month-polygon:nth-child(4),
.member-of-the-month-polygon:nth-child(5),
.member-of-the-month-polygon:nth-child(6),
.member-of-the-month-polygon:nth-child(7) {
grid-row: 2 / 3;
margin-top: -50%;
margin-bottom: -100%;
}

.member-of-the-month-polygon:nth-child(8),
.member-of-the-month-polygon:nth-child(9),
.member-of-the-month-polygon:nth-child(10) {
grid-row: 3 / 4;
margin-left: 53%;
}

}

.member-of-the-month-polygon {
width: 100%;
aspect-ratio: 1 / 1;
}

.member-of-the-month-polygon {
position: relative;
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

@media (min-width: 768px) and (max-width: 991px) {
.member-of-the-months__rows-wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(6, auto);
gap: 1rem;
}

.member-of-the-month-polygon {
width: 100%;
aspect-ratio: 1 / 1;
}

.member-of-the-month-polygon:nth-child(1),
.member-of-the-month-polygon:nth-child(2),
.member-of-the-month-polygon:nth-child(3) {
grid-row: 1 / 2;
}

.member-of-the-month-polygon:nth-child(4),
.member-of-the-month-polygon:nth-child(5) {
grid-row: 2 / 3;
margin: -50% 53%;
}

.member-of-the-month-polygon:nth-child(6) {
grid-row: 3 / 4;
margin: 0 107%;
}

.member-of-the-month-polygon:nth-child(7) {
grid-row: 4 / 5;
margin: 0 107%;
}

.member-of-the-month-polygon:nth-child(8),
.member-of-the-month-polygon:nth-child(9) {
grid-row: 5 / 6;
margin: -50% 53%;
}

.member-of-the-month-polygon:nth-child(10) {
grid-row: 6 / 7;
margin: 0 107%;
}

}

@media (max-width: 767px) {
.member-of-the-months__rows-wrapper {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(7, auto);
gap: 1rem;
}

.member-of-the-month-polygon {
width: 100%;
aspect-ratio: 1 / 1;
}

.member-of-the-month-polygon:nth-child(1) {
grid-row: 1 / 2;
margin: 0 53%;
}

.member-of-the-month-polygon:nth-child(2),
.member-of-the-month-polygon:nth-child(3) {
grid-row: 2 / 3;
margin: -50% 0;
}

.member-of-the-month-polygon:nth-child(4) {
grid-row: 3/ 4;
margin: 0 53%;
}

.member-of-the-month-polygon:nth-child(5),
.member-of-the-month-polygon:nth-child(6) {
grid-row: 4 / 5;
margin: -50% 0;
}

.member-of-the-month-polygon:nth-child(7) {
grid-row: 5 / 6;
margin: 0 53%;
}

.member-of-the-month-polygon:nth-child(8),
.member-of-the-month-polygon:nth-child(9) {
grid-row: 6 / 7;
margin: -50% 0;
}

.member-of-the-month-polygon:nth-child(10) {
grid-row: 7 / 8;
margin: 0 53%;
}

}

.member-of-the-months__img {
width: 100%;
object-fit: cover;
aspect-ratio: 1 / 1;
z-index: 10;
}

.member-of-the-month-polygon-info {
position: absolute;
width: 100%;
height:  100%;

bottom: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
padding: 0 30px;
text-align: center;
line-height: 1.6;
color: var(--brown-main-color);
transition: .3s;
font-weight: 500;
font-size: 1rem;
}

@media (min-width: 992px) {
.member-of-the-month-polygon-info {
font-size: 1.2rem;
}
}

.member-of-the-month-polygon-info span {
transition: .3s;
opacity: 0;
}

.member-of-the-month-polygon:hover .member-of-the-month-polygon-info {
background-color: rgba(250, 164, 25, 0.5);
}

.member-of-the-month-polygon:hover .member-of-the-month-polygon-info span {
opacity: 100%;
}

Я не уверен в возникшей проблеме. Если вы уже сталкивались с подобной проблемой раньше, не могли бы вы поделиться своими мыслями и предложениями, которые помогут мне ее решить?

Подробнее здесь: https://stackoverflow.com/questions/781 ... on-iphones