I am working on a HTML/CSS website (no javascript), and in my navigation menu I have a keyframes animation that starts on :hover and :active (a sub-menu appearing).
The problem: This animation works on all navigators on laptop (including Safari), and on all (at least all the ones I've tested) navigators on android mobiles, but on iPhones, it won't work with Safari but it works with other navigators like chrome.
It is my first real website and I've never encountered that kind of issue so I don't know what's causing it.
What I've tried: I tried adding -webkit- prefix anywhere I could think it could be useful -- not working. I tried decomposing my animation parameters (using animation-name:, animation-duration: etc.. instead of having all in animation: ) -- not working either.
And that's all I could think of.
Safari dev tools: Another thing (I don't know if it's important) is that I have a mac so I used Safari's dev tools to locate the problem, but the problem doesn't appear there. So I am basically working blind because I don't have my hand on an iPhone, and I don't know if there is any other tool I could use that would mimic an iPhone.
Thanks for your help!
.menu-primaire {
transition: all 500ms;
&:hover, &:active {
& .head_liste__secondaire {
display: inline-block;
position: relative;
top: 25px;
right: 34%;
padding: 0px;
@media screen and (max-width: 768px) {
right: 0;
}
@media screen and (max-width: 425px) {
position: absolute;
top: 70px;
}
}
}
}
.menu-secondaire {
-webkit-animation-name: menu;
-moz-animation-name: menu;
animation-name: menu;
-webkit-animation-duration: 500ms;
-moz-animation-duration: 500ms;
animation-duration: 500ms;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
animation-fill-mode: both;
@for $i from 1 through 4 {
&--#{$i} {
-webkit-animation-delay: 100ms * $i;
-moz-animation-delay: 100ms * $i;
animation-delay: 100ms * $i;
}
}
}
@-webkit-keyframes menu {
0% {
-webkit-transform: translate3d(0,10px,0);
opacity: 0;
}
100% {
-webkit-transform: translate3d(0,0,0);
opacity: 1;
}
}
@-moz-keyframes menu {
0% {
-moz-transform: translate3d(0,10px,0);
opacity: 0;
}
100% {
-moz-transform: translate3d(0,0,0);
opacity: 1;
}
}
@keyframes menu {
0% {
transform: translate3d(0,10px,0);
opacity: 0;
}
100% {
transform: translate3d(0,0,0);
opacity: 1;
}
}<nav>
<ul class="head_liste">
<li class="head_liste__primaire menu-primaire"><a href="#">Button 1</a></li>
<li class="head_liste__primaire menu-primaire">Button 2
<ul class="head_liste__secondaire">
<li class="menu-secondaire menu-secondaire--1"><a href="#">Button 1a</a></li>
<li class="menu-secondaire menu-secondaire--2"><a href="#">Button 1b</a></li>
<li class="menu-secondaire menu-secondaire--3"><a href="#">Button 1c</a></li>
<li class="menu-secondaire menu-secondaire--4"><a href="#">Button 1d</a></li>
</ul>
<li class="head_liste__primaire menu-primaire"><a href="#">Button 3</a></li>
</ul>
</nav>