Animation of menu buttons is not working properly

Question

Hello, I’m joking about CSS, HTML and JS to build a random site. In theory the site was all right, but now that I upended the site and went to open on my mobile and the animation of the round menu buttons are a bit buggy. Sometimes you click the buttons (mainly the one on the card) and they do not retract back, then you need to click again or click the menu to force the buttons to return.

In general it is the button test4 that plus Buga.

Note: I’m using awesome fonts for icons.

my website is this one

HTML:

    <div class="parent2 slideDown noselect">
        <a href="#home"><div class="test1"><i class="fa fa-home fa-2x"></i></div></a>
        <a href="#andrey"><div class="test2"><i class="fa fa-user fa-2x"></i></div></a>
        <a href="#mosufe"><div class="test3"><i class="fa fa-gamepad fa-2x"></i></div></a>
        <a href="#contato"><div class="test4"><i class="fa fa-envelope-o fa-2x"></i></div></a>
        <div class="mask2"><i class="fa fa-home fa-3x"></i></div>
    </div>

CSS:

.parent2 {
  top:15px;
  left:15px;
  position:fixed;
  display:block;
  width:100px;
  height:100px;
  background-color:transparent;
  border-radius:50%;
  z-index:20;
  -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
}
.test1 {
  width:60%;
  height:60%;
  border-radius:50%;
  position:absolute;
  color:white;
  text-align:center;
  line-height:70px;
    top:25%;
  left:25%;
  z-index:19;
  transition: all 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
    position:absolute;
}
.test2 {
  width:60%;
  height:60%;
  border-radius:50%;
  position:absolute;
  color:white;
  text-align:center;
  line-height:70px;
    top:25%;
  left:25%;
  z-index:19;
  transition: all 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550) .2s;
}
.test3 {
  width:60%;
  height:60%;
  border-radius:50%;
  position:absolute;
  color:white;
  text-align:center;
  line-height:70px;
    top:25%;
  left:25%;
  transition: all 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550) .4s;  
}
.test4 {
  width:60%;
  height:60%;
  border-radius:50%;
  position:absolute;
  color:white;
  text-align:center;
  line-height:70px;
  top:25%;
  left:25%;
  transition: all 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550) .6s;  
}
.test1, .test2, .test3, .test4{
  background-color: #cc4444;
  -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.40);
-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.40);
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.40);
}
.mask2 {
  top:15px;
  left:15px;
  width:100px;
  height:100px;
  background:#66aadd;
  border-radius:50%;
  position:absolute;
  z-index:21;
  color:white;
  text-align:center;
  line-height:120px;
  cursor:pointer;
  position:fixed;
}

JS:

$(document).ready(function() {
    /*configuração do menu*/
  var active1 = false;
  var active2 = false;
  var active3 = false;
  var active4 = false;

  var evento = 'ontouchstart' in window ? 'touchstart' : 'click';
  $('.parent2').on(evento, function() {
    if (!active1) $(this).find('.test1').css({'transform': 'translate(0px,125px)'});
    else $(this).find('.test1').css({'transform': 'none'}); 
     if (!active2) $(this).find('.test2').css({'transform': 'translate(60px,105px)'});
    else $(this).find('.test2').css({'transform': 'none'});
      if (!active3) $(this).find('.test3').css({'transform': 'translate(105px,60px)'});
    else $(this).find('.test3').css({'transform': 'none'});
      if (!active4) $(this).find('.test4').css({'transform': 'translate(125px,0px)'});
    else $(this).find('.test4').css({'transform': 'none'});
    active1 = !active1;
    active2 = !active2;
    active3 = !active3;
    active4 = !active4;
    });
     /*Configuração da velocidade em que a tela se mexe*/
    $(".slideDown a").click(function(event){        
        event.preventDefault();
        $('html,body').animate({scrollTop:$(this.hash).offset().top}, 800);
     });
});

The menu example I took from that site on CODEPEN

And the demo version of this menu is this

my website is this one

My menu in codepen

Answer 1

Dude, I switched yours

on('mousedown touchstart')

for

on('click')

... and it worked on my phone.