Slide transition not working properly on iOS

[Jelmeaux]

I'm building a new phonegap iOS app with JQM 1.3.0. for one of our clients.

I've set the default page transition to slide, to mimick a native app as best as possible, but i've run into a problem with this transition.
All the div[data-role="page"] are in the index.html page. When a link is clicked to go to a different page, the next page slides in, before the current page slides out. This means that the next page will be covering the current page, atleast for about 100px, before the current page starts sliding. This instead of the new page "pushing" the current page out of the viewport.

I don't know how the transitions are build exactly, but seeing this, the pages don't seem to be placed next to each other in a container which is slid across the screen, but are two diffferent blocks that are positioned absolute.

Is there a fix for this? I've looked in the issues and used google, but nothing so far...

[jaspermdegroot]

@Jelmeaux

Please provide a simple test page so we can see the markup. See the contributing guidelines for our JS Bin template.

Also, on what iOS version and iPhone/iPad did you see the issue?

[jaspermdegroot]

@Jelmeaux

Closing this ticket because I can't reproduce the issue. Re-opening when a test page has been provided that illustrates the problem.

[Jelmeaux]

Hi uGoMobi, sorry i haven't replied to this thread earlier... been swamped with work lately, so sorry for that!
I've tried to make a fiddle with an example that shows the problem. I've lifted the enhanced code straight from my app (only two pages) to illustrate the problem.

The fiddle can be found here: http://jsfiddle.net/K2Xzc/2/

When you click on the list-item you wil slide to the detail page. And when you go back you will slide back. Especially on the slide animation going to the detail page, you can see that detail page slides over the list page instead of pushing it aside. This is made even more clear by using a dark background as seen in the fiddle. The little black background strip you can see on the right side of the list disappears behind the detail page sliding in.

This is visible in a browser, but even more so when viewing this on a device. In my case an iPhone 5 but the emulator also shows this behavior.

If you need anymore information, let me know!

[jaspermdegroot]

@Jelmeaux

Thanks for the test page. Re-opened the ticket.

[jaspermdegroot]

Copied code to JS Bin that uses latest code http://jsbin.com/atarer/10

[Jelmeaux]

On my large desktop screen it is hard to see the problem on the jsbin, but using my iPhone the problem is clearly visible.

[jaspermdegroot]

I do see the issue on iPad/iOS6.1

[Jelmeaux]

i've tested this in the emulator for iPhone 4/5 and iOS 5 through 6.1 all show this behavior.

And for the record, it doesn't break anything, but really breaks the "native feel" we all try to emulate :)

[jaspermdegroot]

I removed all superfluous markup http://jsbin.com/atarer/10/edit and can still reproduce the issue: the initial page doesn't slide.
The problem only occurs with slide transitions and is visible on both Mobile Safari and Chrome (iOS 6.1.3 / iPad Retina)
Also tested this on Android 4.2.1 / Galaxy Nexus native browser and Chrome. There you don't see the issue.

[nmorse]

I am not seeing any "slide" transitions for Android, Chrome, and all iOS Mobile Safari browsers.
I have recently upgraded from JQM 1.1 (where slide was working, and default) to 1.3 (where "pop" seems to be the default). How far back (in versions) should go to get "Slide" transitions back?

[Jelmeaux]

Slide transitions are working in JQM 1.3, as shown in above posts.
You can set the default page transition by setting the falue of $.mobile.defaultPageTransition to 'slide'.

The problem i was writing about is the transition not working propery

[nmorse]

Thanks Jelmeaux, I was fooled by never getting a mobileinit event, so in effect, I had not really made that assignment. I moved the code out of .on('mobileinit', ...); and things are better , sorry to raise the alarm.