jQuery show() flicker on mobile

Question

This site: http://www.stdavidsschool.co.uk/ uses jQuery to animate the Headlines element under the banner image slider. On desktop it looks fine but on my Galaxy S3 mobile you get a very quick flash of the next item at full height just before the show() animation starts.

Basically it does this:

name = "#item" + currentItem++;
$(name).hide("slide", { direction : "up"}, 1000);
name = "#item" + currentItem;
$(name).show("slide", { direction : "down"}, 1000);

I saw the -webkit-backface-visibility fix but that didn't seem to help - presumably it's for whole page animations.

Any suggestions greatly appreciated!

Answer 1

Given up on slide and switched to fade. Works a treat ;-)

Answer 2

I was having the same issue and found a solution that will allow you to use slide if you'd like.

Implement fastclick.js found here: https://github.com/ftlabs/fastclick.

Link the .js file in the head of your document.

Then simply add

<script>
  $(function() {
    FastClick.attach(document.body);
  });
</script>

to the head of your document.

No more flash/flicker when navigating between pages.

Hope this helps!