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.