Issue when integrating Swiper API into OutSystems mobile app

Issue when integrating Swiper API into OutSystems mobile app

  

Hello

I asked about how to integrate Swiper API into OutSystems mobile app HERE in the community a few days ago. Jorge kindly answered my question and thanks to his advice, I'm now able to integrate Swiper API into both OutSystems' web apps and mobile apps.

As described in my previous post, what I need to achieve is to swipe between different slides in the same page with some coverflow (or any other special fancy transition) effects.

But when I tried to implement a transform effect called "coverflow" ( which is defined in Swiper API HERE), I found that incorrect perspective was applied to all transformations on slide elements.

It's quite difficult to describe the problem clearly so please have a look at the preview of my mobile app HERE. The coverflow effect works perfectly in browser on both PC and mobile and you can preview the normal coverflow effect HERE.

It is also important to note that Swiper API works fine in OutSystems mobile app without the implementation of coverflow effect. In other words, if I initialise Swiper object without coverflow effect when the screen is in OnReady state like below, I can swipe smoothly without any issue.

var mySwiper = new Swiper(".swiper-container");

One of my colleagues told me that the reason might be that Cordova is not fully compatible with Swipe API. But unfortunately nobody can figure out what's the problem and what's behind the scene in my office.

I've attached my .oml file for your reference.


Thanks very much.

Hi Mofeng,

You can rule out Cordova, as you are having this behaviour in the Simulator, that doesn't implement Cordova.

It could be some incompatibility with React... but I see there's at least one ReactJS component built to support it (source repository, demo).

Are you using the List widget? If so, it could be something to do with its virtualization mechanism, that dynamically loads and unloads elements on demand.

Jorge Martins wrote:

Hi Mofeng,

You can rule out Cordova, as you are having this behaviour in the Simulator, that doesn't implement Cordova.

It could be some incompatibility with React... but I see there's at least one ReactJS component built to support it (source repository, demo).

Are you using the List widget? If so, it could be something to do with its virtualization mechanism, that dynamically loads and unloads elements on demand.


No I'm not using List widget.

I'm only using some HTML elements (div tags and p tags) without any widget from OutSystems.

What do you think is the reason for this incompatibility?

Really weird because the swipe effect itself works fine with OutSystems but when I'm trying to add the coverflow effect this annoying incorrect 3D perspective issue occurs....

I understand this might not be OutSystem's problem but i'll be appreciated if you could provide some advice.

Jorge Martins wrote:

Hi Mofeng,

You can rule out Cordova, as you are having this behaviour in the Simulator, that doesn't implement Cordova.

It could be some incompatibility with React... but I see there's at least one ReactJS component built to support it (source repository, demo).

Are you using the List widget? If so, it could be something to do with its virtualization mechanism, that dynamically loads and unloads elements on demand.

After installed OutSystems Now my iOS/Android devices I found that if I turn my devices landscape and everything works fine with those fancy 3D effects even after I rotate it back to portrait!

However if I restart the application on my devices then that incorrect perspective issues happen again...

Maybe something is reloaded after the device is rotated but I still have no idea what's going behind the scene.

I'm a beginner in OutSystems so please help me here.

Thanks very much!