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 first unhide the required case study then scroll to it.

This works on all desktop browsers on Windows and Mac, but on the iPhone and iPad you get a horrible flicker as it scrolls down.

Not quite sure how to debug or fix this issue.

Any ideas would be of great help!

Thanks in advance, Shadi

UPDATE 1

The latest page can be found here. Still haven't found a fix - if anyone has any idea it would be amazing!

Ouch. Just tested on my iPad simulator and I can see what you mean ... — Fred, Nov 26 '10 at 00:54
Maybe on iphone/ipad devices the click() event should be replaced with touch event? I am not sure, just an idea. I think that click event on touch devices has longer duration to distinct it from double click (touch) — Krešimir Prcela, Dec 01 '10 at 13:52
Prcela is correct, click events should be ignored and touchstart or touchend should be used instead. Using click events makes the UI appear sluggish and it has to do with doubletap detection. When the user touches the screen the 'touchstart' event is fired, and a 300ms countdown starts. If the user releases their finger before that timer is up, it will wait until that timer is up to send the 'click' event. If the user holds their finger down until the 300ms timer is up, the click event will be sent as soon as they release. — Bobby, Aug 17 '12 at 00:42

score 60 · Answer 1 · edited Jun 06 '11 at 13:36

60

If you need vertical scroll only, you could use {'axis':'y'} as settings to scrollTo method.

$.scrollTo(*selector*, *time*, {'axis':'y'});

edited Jun 06 '11 at 13:36

Andrei Sfat

8,440
5
49
69

answered Jun 06 '11 at 10:16

wsbrs

736
5
4

That fixed it for me, iPhone 4. – areid Oct 10 '11 at 22:24
1

this is still necessary (and works) even with iOS7 and the latest scrollTo plugin – Simon_Weaver May 25 '14 at 01:08
Note that It's likely not needed anymore after version 2.0 – Ariel Flesler Apr 27 '15 at 11:28

score 14 · Answer 2 · answered Dec 01 '10 at 04:15

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;
        }
    });

score 2 · Answer 3 · answered Sep 12 '13 at 06:09

2

Defining {'axis':'y'} has made it right! It helped me with slideUp/Down flickering.

answered Sep 12 '13 at 06:09

Indrek Palm

21
1

changed .scrollTo(, {'axis':'xy'}) to .scrollTo(, {'axis':'y'}) and flicker is gone. – Greg Dec 12 '13 at 15:57

score 2 · Answer 4 · answered Mar 30 '11 at 20:38

If you're just scrolling the page vertically you can replace the entire jQuery scrollTo plugin with this simple line:

$('html,body').animate({scrollTop: $("#scrollingTo").offset().top}, 1000, 'easeOutCubic');

Personally I do something like this

$('html,body').animate({scrollTop: $("#step-1").offset().top-15}, 1000, 'easeOutCubic',function(){
  //do stuff
});

I found that if I try to do other js work while it's scrolling it makes the browser crunch and the animation isn't smooth. But if you use the callback it'll scroll first, then do what you need.

I put a -15 at the end of .top because I wanted to show the top edge of the div I was scrolling do, simply for aesthetic purposes. 1000 is the duration in milliseconds of the animation.

Credit goes to the poster, animate, for the tip off.

score 1 · Answer 5 · answered Apr 22 '15 at 15:11

1

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}.

answered Apr 22 '15 at 15:11

Önder Ceylan

51
2

dubbelj · Answer 6 · 2010-12-02T10:36:17.837

1

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...

edited Dec 02 '10 at 10:36

answered Nov 29 '10 at 14:23

dubbelj

1,150
4
15
23

I'm not sure. I would start by applying the option to everything. To see what it does. – dubbelj Dec 02 '10 at 10:34
Thanks @dubbelj for this suggestion out of the blue. Incidentally, it fixes text rendering method flickering when transitions come into play, as seen on operadiperoni.com. Applying it as `hidden` forces it to continuously render in the slightly thinner weight. – Barney Sep 11 '12 at 14:12

score 1 · Answer 7 · answered Jan 19 '11 at 16:59

I will also confirm Tund Do's method works flawlessly. If you need a "left/right" variation of the same thing (as I did) here it is:

$('.pg6').click(function(){
    var target = $('#page6');
    if (target.length)
    {
        var left = target.offset().left;
        $('html,body').animate({scrollLeft: left}, 1000);
        return false;
    }
});

I would guess you could combine the two, grab the top position and chain the animates for a "left/right/up/down" animation also.

score 1 · Answer 8 · answered Mar 10 '11 at 21:19

1

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

answered Mar 10 '11 at 21:19

animate

11
1

score -1 · Answer 9 · answered Nov 26 '10 at 01:08

-1

You need to add e.preventDefault(); to each .click() call. This prevents the browser's default action, which is to stay in the same place. Hope this helps!
i.e.

$("#quicksand li, .client-list li").click(function (e) {
  e.preventDefault();
  ...
});

answered Nov 26 '10 at 01:08

Fred

4,195
2
29
42

Alas it made no difference :( – Shadi Almosri Nov 27 '10 at 19:42

score -1 · Answer 10 · answered Feb 14 '11 at 20:46

I'm having the same flickering on iPhone -- even with the preventDefault and return false options of canceling the default click event. It appears that on the device it tries to go back to the top of the page before scrolling. If you have both a scrollTop and scrollLeft animation going on it really gets buggy. It's jQuery's issue.. I've seen a scrolling method with mootools that doesn't have this issue. See this page: http://melissahie.com/

score -1 · Answer 11 · answered Mar 01 '12 at 11:34

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!

iPad Flicker on auto scroll using JQuery and Scrollto plugin

11 Answers11

Linked