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.

[jaspermdegroot]

I did some more debugging. This bug is introduced in iOS 6 and affects all versions of jQuery Mobile (tested 1.3.0, 1.2.1 and 1.1.2). On iOS 5 you don't get to see the issue.

I can fix it for Mobile Safari and iOS webview by changing -webkit-transform: translateX(-100%); to -webkit-transform: translate3d(-100%,0,0);. This doesn't resolve the problem on iOS 6 / Chrome though. Still looking into that.

[jaspermdegroot]

On iOS 6 / Chrome the transition does work when I scroll a bit first (but not all the way to the bottom of the page).

[jaspermdegroot]

Disabling hashListening resolves the problem on Chrome. We have to look in navigation to fix this issue.

The Mobile Safari / webview issue was actually a bit different. Here the problem is that the slide out transition starts later than the slide in. This can be fixed with the change in the CSS that I mentioned above.

[Jelmeaux]

I've tried the CSS fix as stated in cf3a07a on my project (which is only for iOS), and the CSS fix doesn't work for me. The transition of the second page starts earlier then the transition of the current page, essentially the same problem as before.

You sure this should fix the issue for iOS webview/safari?

[jaspermdegroot]

@Jelmeaux

I could clearly see the issue on iPad Retina / iOS 6.1.3 on Mobile Safari and in webview. After committing the changes to the slide transition CSS the problem was gone.

I tested webview by saving the page to the homescreen and then launch it. Also tested Mobile Safari iPhone 5 / iOS 6.0 on Browserstack. Test page: http://jsbin.com/atarer/22

Do you only see it in your app (webview) or also on Mobile Safari?

[Jelmeaux]

When viewing the linked JSBin page on my iPhone 5 (iOS 6.0) i still can see the issue. The second page moves over the right padding next to the listview. It's hard to see if both the animations start at the same time but one is slower than the other, or that the animations don't start at the same time. Either way, the problem is still here unfortunately :)

[Jelmeaux]

Oops, misclicked, sorry

[toddparker]

I tested this on my iPhone 5 (iOS 6.1.3) and the animations seemed in sync to me. on iOS5, they sometimes would be a tiny vit out of sync, but not in a consistent way and it's really subtle. I think this is closable or can at least be knocked down low priority.

[toddparker]

Just tested this on the latest Chrome for iOS and sometimes see the animations get a bit out of sync so we can see if the Chrome team has any ideas on why we don't see this in mobile Safari.

[jaspermdegroot]

I will see if I can create a test page that shows the iOS/Chrome issue without jQuery Mobile. I think we need to create a new ticket for this because it's a different issue (the page doesn't transition at all).

About the slide transition not being in sync on iOS/Safari + webview. Although I don't see see the issue anymore I just realized that we use a different duration for the "in" and "out" animation (125ms difference). It makes sense to use the same duration in case of slide transitions.

Update: Changing the milestone to 1.4. This will be part of the transitions review.

[jaspermdegroot]

I was wrong, sorry. We already use the same duration for "in" and "out" animation in case of slide transitions. There is a rule in the slide transition CSS file that overrides the defaults where we use different durations.

[lumierephoto]

I'm building an iPad app with jQuery Mobile/Phonegap and finding this problem in iOS 6 mobile Safari, iOS Chrome and also within a webview (iPad) in a Phonegap app.

I have a test page here: http://tl.dreammachinestudios.com

Also, I've noticed this problem since at least JQM 1.2. Currently I'm using JQM 1.3.2

Using the following code recommended in the docs doesn't work in my particular use case:

        .ui-page { 
           -webkit-backface-visibility: hidden;
        }  

I've noticed that the CSS3 code suggestions in this thread have already been implemented into the source, but they don't solve this particular problem.

It would be great if you could give an update on where this is at.

[sdesapio]

I've found a sort-of fix for slide-in transitions not working. However, I'm actually using jqtouch with an older version of jquery so I'm not 100% the fix will work with jqueryMobile. In any event, I thought I'd post it in the case that it may be somehow be related.

The fix:
Place the following snippet at the bottom of the same div container as the navigation link that calls the slide transition...

<textarea style="visibility:hidden;" placeholder=" "></textarea>

For instance (jqtouch example):

  <div id="home" class="section_container current">

     <div class="toolbar">
        <h1>My App</h1>
        <a href="#about" class="button flip">About</a>
     </div>

     <ul class="rounded">
        <li class="arrow">
           <a href="#other_section">Other Section</a>
        </li>
     </ul>

     <textarea style="visibility:hidden;" placeholder=" "></textarea>
  </div>

I've no idea why it works but, I've used it in two separate instances and it seems to correct whatever the actual bug is. NOTE: In my tests, it's actually the placeholder attribute WITH a value, even a simple space, that forces the fix.

[lumierephoto]

@sdesapio I tried your fix, but unfortunately did not work. Which build did you try this on? I'm on JQM 1.3.2. I decided to build the app using JQTouch instead and I'm not having any more problems with transitions.

[sdesapio]

@lumierephoto The fix was never tested with any JQM version. jqTouch only.

[lumierephoto]

@sdesapio I will keep your fix in mind as I work on my JQT version. So far, I don't have any issues with transitions.

[dantabel]

I figured out a hack that works for me. Hope it helps someone else:

The problem I was experiencing was the slide in animation is starting (and sometimes finishing) before the slide out animation has started, when they should be running simultaneously.

I narrowed it down to the startOut function in createHandler where, for simultaneous transitions doneOut is called before the $from animation is called. See below

// line 3674 - jquery.mobile-1.3.2.js
startOut = function() {
    // if it's not sequential, call the doneOut transition to start the TO page animating in simultaneously
    if ( !sequential ) {
        doneOut();
    }
    else {
        $from.animationComplete( doneOut );
    }

    // Set the from page's height and start it transitioning out
    // Note: setting an explicit height helps eliminate tiling in the transitions
    $from
        .height( screenHeight + $.mobile.window.scrollTop() )
        .addClass( name + " out" + reverseClass );
},

I found that moving the if ( !sequential ) statement below the $from fixed the forward animations but caused a lag on the reverse ones, so I came up with this:

startOut = function() {
    if ( !sequential && reverse) {
        doneOut();
    } else if(sequential) {
        $from.animationComplete( doneOut );
    }

    $from
        .height( screenHeight + $.mobile.window.scrollTop() )
        .addClass( name + " out" + reverseClass );

    if ( !sequential && !reverse) {
        doneOut();
    }
},

It feels like a horrible hack but it works for me!

[dantabel]

@JGeeks I tried your fix BTW, it works, but I get a slight lag between the two animations causing a gap. With my solution there's no gap.

[lumierephoto]

@dantabel I'll try out your fix and let you know

[lumierephoto]

@dantabel Your fix didn't work for me unfortunately

[ghost]

@dantabel your fix worked for me, thank you so much saved my ass :) they should put that in jqm 1.4 1

[Ruffio]

Is dantabel's hack a feasible way to go? If so a PR should be made.

@dantabel why don't you make a PR and let the team take a view, so this issue can be closed?

[Ruffio]

Is this still relevant for iOS 8? Should the fix be included in 1.4.5 iOS release?

[apsdehal]

This seems to be fixed now.

[OrZipori]

Hello, There are still bugs in the slide right and slide left transitions in iOS. Currently I use the latest cordova with xcode 8, and the transitions are still buggy in safari. The transitions are working well in chrome though.

When I say buggy I mean, that when the user taps on a button which leads to a different page, the slide to the right isn't smooth. It got a little delay between the slide in and slide out, and for the reverse slide, well it's a bit messy. The delay is a little bit bigger and also the slide in and out are not synchronized.

Is there any way to solve it, please?

[auriga-dev]

Hi there,
I'm using Jquery Mobile for a webapp and it works pretty good!
I still have a bug on ios safari when I don't scroll and I use a transtion slide the next page appears first then slide and it's pretty wierd. If I scroll on the page and then tap it works. So the issue is only when I don't scroll. Any idea how to fix this issue? As of now the fix I made is that if scrollTop is equal to zero I scroll down 1px before the animation and it works.
Using Jquery Mbile 1.4.5 and jQuery 2.2.4

`$('a').on("click", function(e){

    	console.log($(this).attr("href"))
    	console.log($(this).data("transition"))
    	var link = $(this).attr("href")
    	var transition = $(this).data("transition")

    	if(transition === undefined){
    		transition = "fade";
    	}

    	if($('html, body').scrollTop()<= 0){
    		$('html, body').scrollTop(1)
    	}

    	$.mobile.changePage(link, { transition: transition, changeHash: true });

 });`