ShawnWhite ShawnWhite - 1 month ago 10
jQuery Question

New iOS and Safari remove classes added via script in jQuery on scroll

since the last iOS Update (8+), the Safari "destroys" a jQuery script I use for my mobile navigations.
The mark up is a normal unordered list, generated from Contao.

Now, when I open my page on iOS 8+, the script loads normally, I can open my navigation without a problem, but as soon as I scroll down a bit, it just closes my menu - not even with the toggle slide animation, it just disappears.

My Markup:

<div class="nav-btn"> <!-- burger icon for menu interaction !-->
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="mod_navigation main-menu"> <!-- menu !-->
<ul class="level_1 clearfix"> <!-- main menu list !-->
<!-- list elements and anchors following here !-->
<li><a href="..." title="...">...</a></li>
</ul>
</div>


My jQuery:

function hideDiv(){
if ($(window).width() > 941) { $(".main-menu .level_1").show(); } else { $(".main-menu .level_1").hide(); }
}

$(document).ready(function(){
hideDiv();
console.log('logging');
$('.header .nav-btn').click(function () {
$('.main-menu .level_1').stop(true,true).slideToggle();
$('.nav-btn').toggleClass( "open" );
});
$(window).resize(function(){
hideDiv();
$('.nav-btn').removeClass("open");
});
});


Does anyone use a similar script and/or can tell me why it's closing my menu?

I also created a JSFiddle. http://jsfiddle.net/940293vw/1/

I read an article about how they changed the scroll event in iOS8, but that didn't go further into the detail about why they should just stop my script when scrolling.

Any help is appreciated!

Answer

I managed to fix it pretty soon after asking this question, forgot to answer it. Anyway. This worked, for anyone encountering the same issue.

    /* ios 8+*/
var widthwdw = 0;

$(window).load(function(){
   widthwdw = $(window).width();
});

$(window).resize(function(){

  if(widthwdw != $(window).width()){
    //Do something
    widthwdw = $(window).width();
    hideDiv();
    $('.header .nav-btn').removeClass("open");
  }

});
Comments