Hi again: this is same problem I already described in an earlier post and I really need some help to get this handled. I’m rebuilding the site as new project and the same issue is coming up again.
I have a a hamburger menu consisting of one div-wrapper for three lines.
On click the two outer lines merge in the middle and each rotates 315° in opposite directions. The middle line fades out.
On second click the process is supposed to be reversed.
Looks likes this in the interaction menu:
Looks good doesn’t it?
Yet the result doesn’t look good, neither in preview mode nor on the live site: (
The gif is from Firefox, where the issue is the most apparent.
In Safari and Chrome, it may take a couple of clicks until it there is a noticeable deviation.
However, even in the cases where it looks normal, a closer look at the site-code reveals that the code isn’t what it is supposed to be…
as you can see in the last picture, the first hamburger has the rotate-Z put to 0.264°, the third one to -1.178°. Both values should be at 0.0deg as specified. The deviations seem random.
Here is another pic with a another deviation:
I tried using super small values, like 0.001° instead. This this to lessen the issue a little, but it doesn’t fix it.
I just can’t figure this out. What am I missing?
Would really appreciate if someone could take a look at it.