jQuery Forum

I have a serious problem with my jQuery events. All the jQuery events in my .js file are performed with serious delay (more than 4 seconds) after the event is triggered. Here's the code JSFiddle

$(document).ready(function() {


var headerWrap = $(".header-wrap");
var hOne = $("#header-section h1");
var buttonMenu = $("header button");
var menuSlide = $(".menu-slide");
var menuSlideAnchor = $(".menu-slide a");

menuSlideAnchor.on("click", function() {


$("button i").toggleClass("fa-reorder fa-times");
//menuSlide.slideToggle("200", "swing");
if (menuSlide.css("display") === "none") {

  menuSlide.css("display", "block");

} else {

  menuSlide.css("display", "none");

};

});

buttonMenu.on("click", function() {

$("header button i").toggleClass("fa-reorder fa-times");
//menuSlide.slideToggle("200", "swing");
if (menuSlide.css("display") === "none") {

  menuSlide.css("display", "block");

} else {

  menuSlide.css("display", "none");

};


});


 <!--END Header Button-------------------------------------------------------------------------->



//WINDOW SCROLL Control <h1> and <nav.menu-slide>

$(window).scroll(function() {

//Prevent <h1> from fading out, in case that <nav.menu-slide> is displayed! 
if ($(this).scrollTop() > 20) {

  hOne.fadeOut(100, "swing");
  menuSlide.css("margin-top", "80px");


} else if ($(this).scrollTop() <= 20) {

  menuSlide.css("margin-top", "140px");
  hOne.fadeIn(200, "swing");


}


});

//END WINDOW SCROLL
});

to my website.The delay in the code execution is detected only on iOS safari mobile browsers! The events that cause the delay are $("button").on("click"), %(window).resize() and $("a").on("click"). Could you please advise me on possible solutions.

Thank You.