Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Slide transition not working properly on iOS #5764

Open
Jelmeaux opened this Issue · 34 comments

8 participants

@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
Collaborator

@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
Collaborator

@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
Collaborator

@Jelmeaux

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

@jaspermdegroot
Collaborator

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
Collaborator

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
Collaborator

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
Collaborator

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
Collaborator

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
Collaborator

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
Collaborator

@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 Jelmeaux closed this
@Jelmeaux Jelmeaux reopened this
@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
Collaborator

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
Collaborator

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.

@JGeeks JGeeks referenced this issue from a commit in JGeeks/jquery-mobile
@JGeeks JGeeks Transitions: delay transition to avoid transition stuck, and keep the…
…m slide at same time. Fix for iOS 5. Adresses #5764.
e95f66e
@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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.