Next screen appears before transition is complete

[sinemacula]

I have found an issue that seems to be extremely intermittent. Sometimes it happens, sometimes it doesn't, but when it does, it is a pretty major issue...

Quite simply, before the transition animation is actually completed, the view is updating to the view it is transitioning to. In other words, it is showing the new page too early.

This doesn't happen rarely, in fact, it is actually very frequent. I have played around with a lot of parameters and potential workarounds but unfortunately none of these have targeted this specific area.

I am only developing on IOS so cannot confirm this is an issue on other platforms. And also, I can only confirm that this issue is occurring when using 'flip'. The other transitions seem to work absolutely brilliantly...

[sinemacula]

After researching, I believe I have found someone else with the same issue and a potential solution.

I have set the following and I am hoping the issue is now fixed:

iosdelay: 0

I will leave this post open in case anyone else has any input.

[jamielob]

As well as reduxcing the delay to zero, I found that if the page you were headed to was too "light" in content and CSS styling it would flicker at the beginning of the transition and if it were too "heavy" the in would flicker at some point also. Those are at the extreme ends though, everywhere in between works perfectly.

[midasdas]

There is another problem on iOS, when using CSS3 animations. When an HTML element is making an animation (or the animation has completed), the animated element will return to its initial, non-animated state before the page transition starts (e.g. flip effect). It seems as if the screenshot is taken from the static page, instead of the "live" version. On Android this works without any problems.

I would like to know if there is a workaround for this? I absolutely want to avoid jQuery Mobile transitions or anything else... :)

[EddyVerbruggen]

Hey @midasdas, interesting case. Can you share your project perhaps?

[susanlinsfu]

+1 This is also occurring for me. I created a brand new Ionic project. Created two views. Each view contains a different background color and a button to navigate to the other view. Very simple, no other plugins are installed and no crosswalk.

[susanlinsfu]

If I set a duration of >2000 seconds, the problem seem to disappear, but the transitions then are slow and don't look very good. Tested on a Moto G phone (Android 5.0)

[EddyVerbruggen]

@susanlinsfu Can you share your project? I understand it's a starter with only a few additions, but still it would save me tons of time if I can just unzip something and run it.

[sinemacula]

Well having said that my issue was fixed by setting iosdelay: 0, it actually isn't. It works perfectly on my iPhone 6s, but when I emulate it on my mac, it reverts to all sorts of weird issues... I assume this is just to do with power of the phone in which case it will never be right as every phone model is different...

[EddyVerbruggen]

@Benji6996 I'd love to take a look..

[duke111]

Hi Eddy, I can confirm the same behavior also for the Curl transition. Going back to 5.6 everything is ok. Tested on iPod touch 5 with ios 9.2 I used -1 delay and href (single page app)

[EddyVerbruggen]

@duke111 Thanks, that's a relevant bit of info and it allowed me to narrow it down to this change: https://github.com/Telerik-Verified-Plugins/NativePageTransitions/commit/3a70eb29859a4263f9767d4c8f77518bd32f16a9#diff-86ac3143428ce08f0b84fc98aaa2a567

[susanlinsfu]

@EddyVerbruggen Hi Eddy. Here is a link with the full ionic test app. https://drive.google.com/open?id=0B_Bg9bA0eE0BU0ZzeVRoUFFFWFU. Again I tested this using a real device (Android 5.0 Moto g phone which is a lower end phone).

[EddyVerbruggen]

Thanks @susanlinsfu, but that's a different issue. This is about iOS. I've just rolled back PR #106 which should fix this. Releasing 0.6.2 in a few minutes.

For Android with Crosswalk you can add <preference name="CrosswalkAnimatable" value="true" />, this fixes your app (at least on my KitKat tablet).

[susanlinsfu]

@EddyVerbruggen I have tried setting crosswalkAnimatable to true, but the issue still occurs. Should I open up a new issue on this repository?

[EddyVerbruggen]

No plz mail me at eddyverbruggen@gmail.com

[midasdas]

Hey @EddyVerbruggen, sorry for the delay... I have attached a sample project showing the CSS3 animations. Tested on the new iPod Touch 6. myApp2.zip