I just implemented a custom hamburger menu with animation using HTML, CSS, and JavaScript on my website. The animation works perfectly on Android devices but not on iOS. Any suggestions for fixing this issue?
I attempted to add the Webkit prefix to each part of the CSS, but it didn't resolve the problem.
Code Snippet
var state = 0;
var icona = document.getElementById("icon");
var path = document.getElementById("mypath");
icona.addEventListener("click", function(event) {
event.preventDefault();
if (state == 0) {
path.classList.remove('shape2');
path.classList.add('shape1');
state = 1;
console.log("shape1");
} else {
path.classList.remove('shape1');
path.classList.add('shape2');
state = 0;
console.log("shape2");
}
});
icona.addEventListener("touchstart", function(event) {
event.preventDefault();
if (state == 0) {
path.classList.remove('shape2');
path.classList.add('shape1');
state = 1;
console.log("shape1");
} else {
path.classList.remove('shape1');
path.classList.add('shape2');
state = 0;
console.log("shape2");
}
});body {
background-color: black;
font-family: sans-serif;
}
.shape1 {
-webkit-animation: webkit-apertura 800ms ease-in-out forwards;
animation: apertura 800ms ease-in-out forwards;
}
.shape2 {
-webkit-animation: webkit-chiusura 800ms ease-in-out forwards;
animation: chiusura 800ms ease-in-out forwards;
}
@-webkit-keyframes webkit-apertura {
0% {
d: path("M 1 1 L 16 1 M 16 1 L 31 1 M 1 11 L 16 11 M 16 11 L 31 11 M 1 21 L 16 21 M 16 21 L 31 21");
}
50% {
d: path("M 1 11 L 16 1 M 16 1 L 31 11 M 1 11 L 16 11 M 16 11 L 31 11 M 1 11 L 16 21 M 16 21 L 31 11");
}
100% {
d: path("M 16 11 L 6 1 M 26 1 L 16 11 M 16 11 L 16 11 M 16 11 L 16 11 M 16 11 L 6 21 M 26 21 L 16 11");
}
}
@keyframes apertura {
0% {
d: path("M 1 1 L 16 1 M 16 1 L 31 1 M 1 11 L 16 11 M 16 11 L 31 11 M 1 21 L 16 21 M 16 21 L 31 21");
}
50% {
d: path("M 1 11 L 16 1 M 16 1 L 31 11 M 1 11 L 16 11 M 16 11 L 31 11 M 1 11 L 16 21 M 16 21 L 31 11");
}
100% {
d: path("M 16 11 L 6 1 M 26 1 L 16 11 M 16 11 L 16 11 M 16 11 L 16 11 M 16 11 L 6 21 M 26 21 L 16 11");
}
}
@keyframes chiusura {
0% {
d: path("M 16 11 L 6 1 M 26 1 L 16 11 M 16 11 L 16 11 M 16 11 L 16 11 M 16 11 L 6 21 M 26 21 L 16 11");
}
50% {
d: path("M 1 11 L 16 1 M 16 1 L 31 11 M 1 11 L 16 11 M 16 11 L 31 11 M 1 11 L 16 21 M 16 21 L 31 11");
}
100% {
d: path("M 1 1 L 16 1 M 16 1 L 31 1 M 1 11 L 16 11 M 16 11 L 31 11 M 1 21 L 16 21 M 16 21 L 31 21");
}
}
@-webkit-keyframes webkit-chiusura {
0% {
d: path("M 16 11 L 6 1 M 26 1 L 16 11 M 16 11 L 16 11 M 16 11 L 16 11 M 16 11 L 6 21 M 26 21 L 16 11");
}
50% {
d: path("M 1 11 L 16 1 M 16 1 L 31 11 M 1 11 L 16 11 M 16 11 L 31 11 M 1 11 L 16 21 M 16 21 L 31 11");
}
100% {
d: path("M 1 1 L 16 1 M 16 1 L 31 1 M 1 11 L 16 11 M 16 11 L 31 11 M 1 21 L 16 21 M 16 21 L 31 21");
}
}<div style="color:white">touch or click to animate</div>
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 20" id="icon">
<path id="mypath" d="M 1 1 L 16 1 M 16 1 L 31 1 M 1 11 L 16 11 M 16 11 L 31 11 M 1 21 L 16 21 M 16 21 L 31 21" fill="none" stroke="white" stroke-width="1" />
</svg>