Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Already on GitHub? Sign in to your account

slide transition fails on fullscreen iPhone #4387

Closed
ocorbun opened this Issue May 18, 2012 · 25 comments

Comments

Projects
None yet
10 participants

ocorbun commented May 18, 2012

Hi,

I am using jQuery Mobile 1.1.0 with 1.7.1 and noticed that one special page transition (slide) is not properly working when the iPhone4 opens the site in fullscreen. Getting fullscreen can be achieved by adding apple-mobile-web-app-capable in the head and by saving a link on the device home screen. Safari gets hidden using this link.

This behavior can be reproduced with the following simple test page. All transitions will work in Safari mobile, and only "slide" will fail in fullscreen. The problem is that Page2 is displayed briefly before executing the slide transition.

<!DOCTYPE html>
<html>
<head>
 <title>Transitions</title>
 <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
 <meta name="apple-mobile-web-app-capable" content="yes" />
 <link rel="stylesheet" href="jquery/jquery.mobile-1.1.0.min.css" />
 <script src="jquery/jquery-1.7.1.min.js"></script>
 <script src="jquery/jquery.mobile-1.1.0.min.js"></script>
    </head>
    <body>
 <div data-role="page" id="page1">
            <div data-role="header" data-position="fixed">
                <a data-rel="back" data-icon="arrow-l" id="previousButton" data-direction="reverse">Back</a>
                <h1>Page1</h1>
            </div>
 <div data-role="content">
 <h2>Test jQM transitions</h2>
 <a href="#page2" data-role="button" data-transition="slide" data-inline="true">slide</a>
 <a href="#page2" data-role="button" data-transition="fade" data-inline="true">fade</a>
 <a href="#page2" data-role="button" data-transition="none" data-inline="true">none</a>
 <a href="#page2" data-role="button" data-transition="pop" data-inline="true">pop</a>
 <a href="#page2" data-role="button" data-transition="flip" data-inline="true">flip</a>
 <a href="#page2" data-role="button" data-transition="turn" data-inline="true">turn</a>
 <a href="#page2" data-role="button" data-transition="flow" data-inline="true">flow</a>
 <a href="#page2" data-role="button" data-transition="slidefade" data-inline="true">slidefade</a>
 <a href="#page2" data-role="button" data-transition="slideup" data-inline="true">slideup</a>
 <a href="#page2" data-role="button" data-transition="slidedown" data-inline="true">slidedown</a>
 </div>
 </div>
 <div data-role="page" id="page2" style="background: #eeeeaa">
            <div data-role="header" data-position="fixed">
                <a href="#page1" data-rel="back" data-icon="arrow-l" id="previousButton" data-direction="reverse">Back</a>
                <h1>Page2</h1>
            </div>
 <div data-role="content"></div>
 </div>
 </body>
</html>

ocorbun commented May 18, 2012

Note that the slide transition in fullscreen works with jqm 1.0.1.

mesca commented May 18, 2012

I have the same exact issue, and I am really struggling on this one. For now, I just deactivated the transitions out of frustration.
@ocorbun Thank you for your test case, I have the same behavior. However, on real-world apps, this problem happens on arbitrary pages (some slide transitions work as expected and other don't). Also I noticed the issue on other transition types too.

This is a huge issue for me as well.
When a web app starts from the home screen on an iOS device there are times when the to page flashes into view BEFORE the transition starts; it then is hidden and then the slide in transition takes place. There are also times that the to page flashes, or blinks, after the transition has taken place.
This appears to be a timing issue with transition states, or when certain CSS properties are added/removed.
Easy to see on m.integra-international.net 1.1 beta site.

I ran through the jQM transition code and found that the "$to.addClass($.mobile.activePageClass);", that is being called at the beginning of startIn(), is responsible for setting the css property display to block too early in the transition cycle. The problem is that it is being called before the css classes "slide" and "in" are being applied.
I've made a quick test by moving the $to.addClass($.mobile.activePageClass); call to just after the setting of the "slide" and "in" classes and the results are positive ( take a look at http://m.integra-international.net ).
I haven't taken a look to see if this breaks any of the other transitions, but will do so on Tuesday.
The last problem with the "flash" after the transition appears to be due to a css property being set AFTER the transition is finished. It appears to be a margin or padding change on the header or page (sometimes there is just a repositioning of the to page and sometimes the browser re-writes the page ).

ocorbun commented May 21, 2012

@ToddThomson Thanks for this fix. I can confirm. It looks to work in my little example and in my project.

mesca commented May 21, 2012

@ToddThomson I confirm too that this solves the issue of the previous page being briefly shown before transition.

You're welcome. Before I send in a pull request, I want to take a look at another glitch in the transition sequence: for pages longer than the screen size, if you scroll down and then transition backwards ( with a back button ) the "from" page scrolls to the top, but unfortunately the header bar ( fixed ) is positioned incorrectly ( there is a blank area at the top of the page about the width of the header bar itself ). Has anyone else seen this behaviour? Anyway it is easily reproducible so I should be able to fix it. I also want to see if I can track down the ui-content section movement issue that occurs after the transition has completed ( very slight [ a few pixels ] downward movement of the ui-content section ).

Also, please note that this "fix" is just a workaround and has not been thoroughly tested.

mesca commented May 21, 2012

for pages longer than the screen size, if you scroll down and then transition backwards ( with a back button ) the "from" page scrolls to the top, but unfortunately the header bar ( fixed ) is positioned incorrectly ( there is a blank area at the top of the page about the width of the header bar itself ). Has anyone else seen this behaviour?

Yes, I confirm this issue.

I've determined that the ui-page-header-fixed class is responsible for the amount of "padding" that is above the fixed header for the situation when you scroll downward and then transition backward.

I can confirm that moving the "$to.addClass($.mobile.activePageClass);" call works for me to. No adverse effects so far, but haven't tested on Android yet, just iOS 5.

@mesca For the issue with fixed toolbars being positioned incorrectly I added issue 4418. There is a workaround supplied.

@ghost ghost assigned scottjehl May 24, 2012

The actual problem is not that the "$to.addClass($.mobile.activePageClass);" is called too early in the transition (as I said above), but that it is called before scrollPage(). While the scrollPage() function is executed, both to and from pages are displayed briefly ( both have display: block ) before the transition animation is started.

mmannes commented Jun 6, 2012

Hey guys,

I was having the same issue here and I solved without changing jQM source. The problem was caused by automatically updating page padding when creating every page.

Just set the property updatePagePadding = false in fixedtoolbar object as follows:
$(document).bind('pagebeforecreate', function () {
$("[data-role=header]").fixedtoolbar({ updatePagePadding: false });
$("[data-role=footer]").fixedtoolbar({ updatePagePadding: false });
});

After that you will need to manually control the content's padding of your application. If you use your content inside a div with data-role="content", you can use the following CSS:

<style> div[data-role="content"] { margin-top: 2.5em; } </style>

Hope it helps you!

Contributor

MauriceG commented Jun 11, 2012

Hi @ocorbun, hi all!
I've tested the code above with latest on iPad 3 and iPhone 4 in fullscreen and could not see any issue with the slide transition.
Do you still see any issue?
Online test: http://test.jqmobile.de/slide.html

ocorbun commented Jun 11, 2012

@MauriceG yes it works fine on my iPhone4, iOS 5.1.1. Which fix did you use? From @ToddThomson or from @mmannes ?

@MauriceG Your test code needs to have extra content on each page.
I've also dropped the latest jQM script into my app and there is no change ( although I will see in a bit if changing 'structure' to the latest version makes a difference ( you can see the problem at http://m.integra-international.net - select business calendar from the main menu ).
Also the problem with the fixed header toolbar positioning is still there.
The cause for the flash of content being displayed for both the to and from page is obvious in the code. The 'to' page is set to active (display: block) and then a scrollPage() takes place. So, for the duration of the scroll, the content of both pages occupy the viewport.
Anyway, I'll now see if updating structure makes a difference.

@MauriceG When I reference the latest structure from the Integra app, the issue of content from both pages being momentarily displayed is fixed. I will diff the latest structure and the 1.1 version to see what the relevant change was.
The other issue referenced in this thread: issue #4418 has not yet been addressed.

Contributor

MauriceG commented Jun 11, 2012

Hi @ToddThomson
I've tried the suggested site above on iPhone 4S iOS 5.1 and iPad 2 iOS 5.1 with and without fullscreen mode and I do not see any issue.

@MauriceG Yes, I updated to the latest structure css and saw that ui-page-pre-in is now being set at the same time that the to page is being set to the active page in the transition code. The ui-page-pre-in class sets the opacity of the to page to 0. This solution hides the to page while the scrollPage() processing is happening ( the root cause of the problem ). This works for me ( although I would say that the simultaneous transition code is getting a bit "patchy" - a day to refactor the code would be a good thing ).

hzlzh commented Jun 12, 2012

Also I met this bug, and solved by changing it like what @ToddThomson said.
works fine at iOS 5.

startIn = function() {
    // Send focus to page as it is now display: block
    $.mobile.focusPage($to);

    // Set to page height
    $to.height(screenHeight + toScroll);

    scrollPage();

    if (!none) {
        $to.animationComplete(doneIn);
    }

    $to.addClass(name + " in" + reverseClass);
    $to.addClass($.mobile.activePageClass);
    if (none) {
        doneIn();
    }
},
Member

jaspermdegroot commented Dec 19, 2012

@arschmitz - Can you test slide transition in fullscreen mode with latest code on your iPhone 4? http://jsbin.com/osiwuw/15

Owner

arschmitz commented Dec 19, 2012

@ugomobi No problem I'll check it tonight

Owner

arschmitz commented Dec 19, 2012

@ugomobi I checked your test page as well as the docs in full screen mode can't reproduce so I'm going to close as fixed in latest

@arschmitz arschmitz closed this Dec 19, 2012

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment