You're viewing old version number 3. - Current version

JQuery animation flicker on iPad

When using the mmenu with a fixed position header on iPad, and the screen has been scrolled down a bit, the screen has an annoying flicker when expanding and closing the menu.

http://stackoverflow.com/questions/19181776/how-to-stop-the-screen-from-flickering-right-before-jquerys-animate-executes

Well From what I understood. It's a problem from the recalculation of sizes and positioning of the elements.

I suggest you to put your #menu as position:absolute instead of position:static.

So, when you change your menu position css, from absolute to fixed, the browser will not need to recalculate the position and sizes of other elements,because the both position (absolute and fixed) are flying over the other elements, don't affecting then "phisically"

another comment:

Okay, seems the problem was two-folded:

I pointed to instead to the href, which I also dynamically change on scroll
Did not 'release' the event
It now works smoothly, with no flickering, like this:

$("#menubar").on("click", "#menu a[href='#top']", function(){
    $('body,html').animate({ scrollTop: 0 }, 'slow');
    return false;
});


https://github.com/woothemes/FlexSlider/issues/45

http://outof.me/fixing-flickers-jumps-of-jquery-mobile-transitions-in-phonegap-apps/

http://blogs.bytecode.com.au/glen/2011/07/14/eliminating-annoying-flicker-transitions-with.html

http://juicebox.net/forum/viewtopic.php?id=839

#juncotodo - #jquery - #menu

From JR's : articles
162 words - 1439 chars
created on
updated on - #
source - versions

Related articles
JQuery animation flicker on iPad - Feb 05, 2014



A     A     A     A     A

© 2013-2017 JotHut - Online notebook

current date: Nov 14, 2024 - 12:55 p.m. EST