Search code examples
javascriptresponsive-designsafarimobile-safari

Mobile menu doesn't close on iPhone


I'm told that the mobile menu on my page (accessible through the 3 horizontal bars icon top right) doesn't close on iPhone. I can't check myself because I don't have Apple devices (on online iPhone simulators it does work though) but I don't see why it would work on Android and not on iPhone.

Here's the JS code controlling the mobile menu:

$( '#mobile_menu_icon' ).click(function() {
    if( $( '.mobile_header_menu' ).css( 'right' ) == '-280px' ) { 
        $( '.mobile_header_menu' ).animate( { right: '0' }, open_delay, 'easeInOutExpo' );  
        $( '#wrap' ).animate({ right: '280px' }, open_delay, 'easeInOutExpo' );
        $( 'body' ).addClass( 'overflow_hidden' );
    }
    else { 
        $( '.mobile_header_menu' ).animate({ right: '-280px' }, close_delay, 'easeInOutExpo' );
        $( '#wrap' ).animate({ right: '0' }, close_delay, 'easeInOutExpo' );    
        $( 'body' ).removeClass( 'overflow_hidden' );
    }
    return false;
});
$( document, '.mobile_header_menu_close' ).click(function() {
    if( $( '.mobile_header_menu' ).css( 'right' ) == '0px' ) {
        $( '.mobile_header_menu' ).animate({ right: '-280px' }, close_delay, 'easeInOutExpo' );
        $( '#wrap' ).animate({ right: '0' }, close_delay, 'easeInOutExpo' );
        $( 'body' ).removeClass( 'overflow_hidden' );   
    }
});
$( '.mobile_header_menu_inner' ).click(function( event ) {
    event.stopPropagation();
});

Solution

  • I removed the following piece and it worked. Don't understand why it was problematical on iPhones.

    $( '.mobile_header_menu_inner' ).click(function( event ) {
        event.stopPropagation();
    });