I am currently working on developing a website using HTML and CSS (without JavaScript), and I have implemented a keyframes animation in the navigation menu that triggers on :hover and :active states to display a sub-menu.
The Issue: The animation functions correctly on all web browsers on laptops (including Safari) and most of the browsers on Android mobile devices. However, it does not work on iPhones with Safari, but it works fine on other browsers like Chrome.
This is my first real website project, and I'm unfamiliar with this particular problem, so I'm unsure of what's causing it.
Actions Taken So Far: I attempted adding -webkit- prefixes wherever applicable, but it did not solve the issue. I also tried breaking down the animation parameters by using properties such as animation-name:, animation-duration: instead of combining them under a single 'animation:' property – but that didn't help either.
These are all the solutions I could think of at the moment.
Safari Development Tools: One thing worth mentioning (though I'm uncertain if it's significant), since I own a Mac, I utilized Safari's development tools to pinpoint the issue. Surprisingly, the problem doesn't manifest there. As I lack an iPhone device for testing purposes, I'm essentially operating blindly here. If you know about any simulators or tools that can replicate an iPhone environment, kindly let me know.
Appreciate your assistance!
.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>