jquery - Mobile menu's jerky sliding animation -
when viewing my page (login = "mmt" | pass = "mmt_nv2014") viewport width below 1068px or on mobile phone, hamburger icon (top left) opens menu sliding left via code:
$( '#mobile_left_menu_icon' ).click(function() { if( $('#mobile_left_menu').css('left') == '-280px' ) { $( "#mobile_left_menu" ).animate( { left: "0" }, open_delay, 'easeinoutexpo' ); $( "#wrapper" ).animate({ left: "280px" }, open_delay, 'easeinoutexpo' ); $( "#mobile_top_menu" ).animate({ left: "280px" }, open_delay, 'easeinoutexpo' ); $( 'body' ).addclass( 'overflow_hidden' ); } else { $( "#mobile_left_menu" ).animate({ left: "-280px" }, close_delay, 'easeinoutexpo' ); $( "#wrapper" ).animate({ left: "0" }, close_delay, 'easeinoutexpo' ); $( "#mobile_top_menu" ).animate({ left: "0" }, close_delay, 'easeinoutexpo' ); $( 'body' ).removeclass( 'overflow_hidden' ); } });
for reason though, animation feels quite jerky on smartphone compared other website similar sliding menu. why that?
try adding
-webkit-backface-visibility: hidden; -webkit-perspective: 1000;
i recommend adding set height menu helps flicker while transitioning.
Comments
Post a Comment