iPad Flicker on auto scroll using JQuery and Scrollto plugin

Question

I am having a bit of a weird problem with iOS platform for a page i am developing. This is the page in question. When clicking any of the case study images, the page will

Answer 1

Thanks nicole for giving the example with mootools. It really seems to be a jQuery issue when trying to do a animation on BOTH scrollTop and scrollLeft.

With mootools:

var scroll = new Fx.Scroll(window, {duration: 1000, wait: false, transition: Fx.Transitions.quadInOut});
scroll.start(y, x);

it works flawlessly on iOS5!

Answer 2

You should include {axis: 'y'} in your options object. Also be sure that you have not enabled interrupt option. You can test this with {interrupt: false}.

Answer 3

Have you tried this:

$('a[href=#target]').
    click(function(){
        var target = $('a[name=target]');
        if (target.length)
        {
            var top = target.offset().top;
            $('html,body').animate({scrollTop: top}, 1000);
            return false;
        }
    });

Answer 4

I'm not sure if this applies to jquery animations. But the following seems to affect CSS animations.

http://css-infos.net/property/-webkit-backface-visibility

Syntax

-webkit-backface-visibility: visibility;

Parameters

visibility Determines whether or not the back face of a transformed element is visible. The default value is visible.

edit

Try applying it to every element and see what happens.

*{
 -webkit-backface-visibility: visible;
}

and try

*{
-webkit-backface-visibility: hidden;
}

It's just a guess really...

Answer 5

I had the same problem.

The problem is the ScrollTo plugin. Instead of using scrollto.js just use .animate with scrollTop. No more flickering in ipad/iphone.

Here it is with no flickering http://www.sneakermatic.com