Anchor scroll flash

ionic-v1
1

Hey guys,

I have a timeline of images in my app. Each image is 100% of the viewport height. At the bottom of each picture I have a button that invokes the scroll delegate to go to the next section.

This is my code in the controller:

//scroll to the next activity
$scope.scrollNextActivity = function(index){
    $location.hash(index);
    $ionicScrollDelegate.anchorScroll(true);
};

The scrolling works fine, however right before scrolling to the next image, the next image flashes and displays over the old image.

Any ideas why this happens? This is happening on ios7 btw.

Thanks in advance

2

Can you post a codepen of this? I use anchor scroll for an app and haven’t experienced this before.

3

ugh, so i recreated my page on a codepen and of course it works perfectly on the code pen but not in my app.
I am going to try and figure out what the difference is, but don’t really know where to start. sigh

4

Take a look at content (how much stuff is there), any conflicting js, comment out some functions and see if it’s creating an issue. Let me know how it goes

5

i got back to the issue after a little while, but can’t solve it. I ended up putting the animation for scrolling to false, and there is no flashing issue (however, it doesnt look as nice).

Is it possible that is it a GPU issue, since each screen has a background image, with css applied to it?

6

Definitely a possibility, especially on older devices.

7

hmm ok so i decided to remove the images just to test, but with the anchorScroll animate set to true, the flashing is still there :confused:
it flashes the section it is going to scroll to before actually doing it.
ever ran into this issue?

8

Why don’t you throw it in a codepen, It may not flash in codepen, but I can transfer it to an actual device and see what the issue is.

9

hey man,

so here is the codepen: http://codepen.io/mlevkovsky/full/odxmc/ it works perfectly well. I will play around to see what can possibly be interfering because in my version (not the codepen) it flashes on the browser and on the iPhone.

EDIT:
Maybe I am not using it properly?

Is this the proper way to use anchorScroll:

$scope.scrollNextActivity = function(index){
    $location.hash(index);
    $ionicScrollDelegate.anchorScroll(true);
};

index being the ID that I am passing in