.class:hover .otherClass {...} - iOS Safari not work - ios

Question

I've tried to do animations on hover with animate.css . Everything works, on desktop (safari, chrome) and mobile too(chrome), but not in Safari(iOS).
iOS Chrome | iOS Safari
//main flexbox
.ref {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
align-content: center;
}
//flexbox child
.ref-content {
height: 350px;
//background: grey;
width: 50%;
transition: 0.75s;
background-size: cover !important;
}
// flexbox text
.ref-text {
text-align: center;
display: none;
position: relative;
transition: 2.5s !important;
width: 100%;
height: 100%;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
h1 {
position: relative;
top: 30%;
display: block;
text-transform: uppercase;
padding-bottom: 10px;
// animate css použitý ako hover
-webkit-animation: fadeInLeft 1.5s;
animation: fadeInLeft 1.5s;
}
p {
position: relative;
top: 30%;
font-size: 1.5em;
// animate css použitý ako hover
-webkit-animation: fadeInLeft 1.75s;
animation: fadeInLeft 1.75s;
opacity: 0.75;
}
a {
display: block;
position: relative;
top: 35%;
// animate css použitý ako hover
-webkit-animation: fadeInLeft 2s;
animation: fadeInLeft 2s;
text-decoration: none;
background: #fff;
color: black;
max-width: 15%;
padding: 10px 0;
border-radius: 25px;
}
}
// ref 1
//ref1 background
.ref-content:nth-child(1) {
background-image: url('http://lavenderforluck.co/wp-content/uploads/2019/02/modern-home-office-desks-desk-designs-executive-options-for-ergonomics-sydney.jpg');
}
.ref-content:nth-child(1):hover .ref-text {
display: block;
color: #fff;
// fadeIn color overlay
-webkit-animation: fadeIn 1.5s;
animation: fadeIn 1.5s;
background: rgba(purple, 0.75);
}
// ref 2
.ref-content:nth-child(2) {
background-image: url('http://lavenderforluck.co/wp-content/uploads/2019/02/modern-home-office-desks-desk-designs-executive-options-for-ergonomics-sydney.jpg');
}
.ref-content:nth-child(2):hover .ref-text {
display: block;
color: #fff;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
background: rgba(black, 0.75);
}
<!-- referencie -->
<div class="ref">
<div class="ref-content">
<div class="ref-text">
<h1>RIVER VIEW RESIDENCE BRATISLAVA</h1>
<p>#web #webdesign #forms #campaing</p>
Zobraziť
</div>
</div>
<div class="ref-content">
<div class="ref-text">
<h1>RIVER VIEW RESIDENCE BRATISLAVA</h1>
<p>#web #webdesign #forms #campaing</p>
Zobraziť
</div>
</div>
</div>
Can someone help me to solve my problem?
I've tried to do animations.
I would be glad, if someone can resolve my problem
Any error message, everything is in screenshot :-)
I've tried lot of options to solve my problem but any of them didnt work well...
I was looking for some answers on stackoverflow too, but i didnt find any answer with problem like this...

Answer 1

You will need to create an overlay! and also in class .ref-text you can "play" with opacity:0; and not with the display: none;.
//scss code
.ref-content{
position: relative;
.ref-text{
opacity: 0;
position: relative;
z-index: -1;
}
&:before {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: 0;
background: rgba(0, 0, 0, 0.35); //put your rgba color here
-webkit-transition: opacity 0.2s ease;
transition: opacity 0.2s ease;
content: '';
z-index: -1;
}
&:hover{
&:before{
opacity: 1;
-webkit-transition: opacity 0.2s ease;
transition: opacity 0.2s ease;
}
.ref-text{
opacity: 1;
position: relative;
z-index: 1;
-webkit-transition: opacity 0.2s ease;
transition: opacity 0.2s ease;
}
}
}