Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

Safari Web Application and Slide Transition with Fixed Header Failure #4418

Closed
ToddThomson opened this Issue · 22 comments
@ToddThomson

For mobile safari web apps ( only those added to home screen ), the slide transition fails under the following scenario:

On a page which has a fixed header and whose content is longer than the screen height, if you scroll down on that page and then attempt to transition to another page (either back or forward), the slide transition will show the header bar shifted down by the height of the header bar itself.

This issue is caused by jQM FixedToolbars setting padding-top of the parent page to the height of the toolbar.

If padding-top is set to 0 during the setup of the slide transition, the transition will work properly. Unfortunately this causes an ugly repositioning of ui-content.

This issue did not occur in release 1.0 as the padding was added to ui-content.

@ToddThomson

I forgot to add that ui-page-header-fixed which sets the padding-top to an arbitrary value of 2.5 em is also a problem ( the updatePagePadding() which sets the padding to the actual height of the toolbar is a good thing in that it is at least accurate ).

@ToddThomson

It appears that commenting out the line:

toggleViewportClass = function () {
//$.mobile.pageContainer.toggleClass("ui-mobile-viewport-transitioning viewport-" + name);
},

prevents the padding above the header toolbar.

It is interesting that it is just the call to toggleClass() which causes the grief - if the ui-mobile-viewport-transitioning properties are all commented out the problem does not go away!

@mesca

Your workaround solves this specific issue, but then another one appears. If I slide from page A to page B, there is a "flash" on page B after the transition has been done. The header is repositioned from about half of the page to the top. I noticed this behavior only where page A's content is longer than the screen height and after having scrolled to the bottom of that page.

@ToddThomson

@mesca - This is a top priority of mine to fix ( I'm rolling out a global app next week ).
I have noticed the "flash" on pages that are loaded for the first time ( subsequent navigation to the page does not flash ). I am working on this issue today.
As for the header positioning issue you have, can you provide me with a simple test bed showing the problem?

@mesca

@ToddThomson - The test case I used is the one from ocorbun on issue #4387. Just add some lorem ipsum inside the content div to get the page 2 scrollable. The jquery.mobile-1.1.0.js must include the workarounds from #4387 and #4418.

<!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="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
 <script src="http://code.jquery.com/jquery.min.js"></script>
 <script src="./jquery.mobile-1.1.0.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"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. nLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></div>
 </div>
 </body>
</html>

For me, the flash happens every time, not only on first page load. If you look closely, the flash is due to the header bar being repositioned. You'll notice it better if you scroll just a little bit on page 2 (something like 1/5 of the page) before tapping the back button.

@ToddThomson

@mesca I've added the test page to http://m.integra-international.net/mobile/test . Can you tell me what platform ( and version ) you are testing with?
I've tested with iPad 3 v5.1.1, iOS simulator v5.1, iPod Touch v5.1. All the issues are related to the "to" and "from" pages transitioning from "scrolled" positions ( or with pages being longer than the screen height ).
With the toggleViewportClass() css line is commented out, there are a number of scenarios where the transition flashes ( even when the web app is not launched from the home screen.

@mesca

@ToddThomson - Tested with an iPhone 4s v.5.1.1.

Test scenario (reproductible every time):

  1. Open webapp (from home screen)
  2. Do not scroll, tap the "slide" button
  3. Scroll just a little bit, so the scroll indicator is about half-way the header (another way of saying the same thing: scroll until the six first lines of text are hidden)
  4. Tap the "back" button

This is my best find to notice the reposition effect, but you stll need eagle eyes. Otherwise, what you will see most of the times is just a flash.

@ToddThomson

@mesca Yes, I see the problem every time as well ( I've also discovered yet another issue with just the original 1.1 code ). I've analyzed the jQM transition code and my feeling right now is that there are just too many problems with the code to fix/patch it for the slide transition ( and without breaking the other transitions ).
I think the best idea is to write a new simultaneous ( in and out at the same time ) css transition handler function from scratch. The new transition handler will be used for iOS devices and the 1.1 TH can be used for all fall back cases.

@mesca

I think the best idea is to write a new simultaneous ( in and out at the same time ) css transition handler function from scratch. The new transition handler will be used for iOS devices and the 1.1 TH can be used for all fall back cases.

@ToddThomson Have you already implemented this? I just had a look at http://m.integra-international.net/mobile/test and noticed the new slide transition. Which is very slow, but I assume you're still working on it? Do you plan to send a pull request or is it considered to be just a workaround?

There have been a number of issues about transitions. It seems to be very difficult to solve a bug without creating another one. So I guess your approach is probably the best for the short term.

@ToddThomson

@mesca I'm still in the process of writing the new transition handler - I just couldn't risk breaking the other transitions. I'll post the code on my company Github page when I'm finished.
Yes, I've slowed the transitions down for debugging purposes. It has already led to another issue: 4424 (fixed).
User expectations for UI transitions are high due to the responsiveness of native apps = we need to get there with jQM transitions ( fade is good for Lowest Common Denominator hardware, but there is no way I can release a web app that also targets iOS without a working slide (translation) transition ).

@ToddThomson

@mesca Try http://m.integra-international.net/mobile/panes
it's a quick and dirty attempt at pane transitions outside of the jQM transition handler. I wanted to see if I could get what I want first. It's very buggy, but works in concept. Over the weekend I'll see if I can make the jQM handler work the same way.

@ToddThomson

@mesca I've updated the transition test page ( http://m.integra-international.net/mobile/panes ). There are now no more issues with the slide transition on the iOS platform.
I've imposed a change to the jQM page to work around the issues that jQM has with fixed layouts. I've used absolute positioning throughout and specify the [ (top.left), (bottom,right) ] coordinates for each pane. When a page/pane is transitioned out, it is moved "offscreen".
Each page/pane has a layout that also uses absolute positioning with the idea that if each of the top, left, bottom, right coordinates are specified, the page/pane div will automatically fill the available viewport. Headers and footers work the same way by automatically stretching out to the viewport width and either being locked to the top or bottom.
This is a large departure from how "pages" and "fixed" headers work with jQM!
I will post the whole ASP.NET MVC project on my company GitHub page soon.
Please give me your comments ( I would also like to hear from the jQM team ).

@ToddThomson

For anyone interested the GitHub project is here: https://github.com/ToddThomson/FixedLayout

@mesca

@ToddThomson Sorry for my late answer, but I was away from my desk for the past few days. I had a look at your demo, it seems to work as expected. I haven't tested it myself thought. I will look carefully tomorrow and implement your fix in my own project. Do I only have to import your patched jQM js file or is there anything else I need to do to get it working?

@ToddThomson

@mesca I tried to fix the jQM transition handler, but it was always 1 step forward then 1 step back. I ended up writing a cleaned-up version that is contained in scripts/acme/acme.transitions-1.1.js.
As I said above, I also imposed some changes to the css styles that a page uses - I've added a pane class to the "page". This is due to the limitations that jQM has with layouts ( I need to have multi-pane layouts for tablet versions of apps ).
Panes are absolutely positioned divs which take advantage of the browsers ( all browsers except ie6 ) ability to dynamically fill their containing box if all 4 of the top,left, bottom, right properties are set. This also makes fixed headers and fixed footers extremely easy to setup.
Anyway, if you are unfamiliar with the MVC 3 project structure that I used, please do not hesitate to contact me via my email address ( see my github profile for the email address ).

@mesca

@ToddThomson. Ok I implemented your fix in my project.

What I did:

  1. include the acme.transitions-1.1.js
  2. include the CSS for the pane rules
  3. bind slide transitions ($.mobile.transitionHandlers["slide"] = acme.transitions.slide;)

Do I need extra HTML?

Although everything works well with your demo project, I still have two bugs I have to figure out on my side (I use the M project framework with mobiscroll):

  1. When transitioning from a scrolled page, the target page first appears with a scroll offset and is then repositioned
  2. Other transitions stopped working

From my point of view, it seems to be a conflict with mobiscroll, I will investigate on this.

@ToddThomson

@mesca The Acme Slide transition handler moves the non-active page offscreen by setting the top and bottom properties of the pane to 10000 and -10000. In order for this to work with the jQM transition handler, I would need to add a function call to a new show() function. The function would need to set a flag isPaneOffscreen accordingly.
I was hoping to get some input from the jQM team on the page/pane changes before going ahead and fixing up the jQM transition code - I guess they're busy with other tasks.

@mesca

@ToddThomson Couldn't you simply bind to pagebeforeshow and pagebeforehide?

@ToddThomson

@mesca I think that I've come to a conclusion on what to do with this issue. I'm going to:

  • patch jQM to fix issue 4387
  • patch jQM fo fix issue 4424
  • stop using jQM fixed toolbars ( as they are the cause of the padding issue that is most relevant to my app + another 2 issues )
  • utilize my pane.css to have fixed layout toolbars (headers & footers) and content ( I like having the scrollbars only on the content div )
  • utilize Acme slide transition - it works!
  • patch jQM transition handler to coexist with Acme transition handler ( deal with isPaneOffScreen )

Notes:

  • This solution is NOT compatible with jQM fixed toolbars.

This will get me out of the "fix the framework" mode and back into getting paid for releasing web apps!

@mmannes

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:

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

Hope it helps you!

@jaspermdegroot
Collaborator

@ToddThomson @mesca @mmannes

It seems to me that the issue is the 100% height of the ui-mobile-viewport-transitioning class in combination with the padding. Adding box-sizing border-box should fix that. Can you edit the css rules for that class and give it a try? Thanks!

.ui-mobile-viewport-transitioning,
.ui-mobile-viewport-transitioning .ui-page {
    width: 100%;
    height: 100%;
    overflow: hidden;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
@ToddThomson

@uGoMobi Yes, that change clears the issue with the header toolbar being positioned down the page by the height of the toolbar itself when the slide transition takes place. Thanks!

@jaspermdegroot jaspermdegroot closed this issue from a commit
@jaspermdegroot jaspermdegroot Fixes #4418 - Include padding for the fixed toolbars in the 100% heig…
…ht of ui-mobile-viewport-transitioning.
ee5df39
@gseguin gseguin referenced this issue from a commit in gseguin/jquery-mobile
@jaspermdegroot jaspermdegroot Fixes #4418 - Include padding for the fixed toolbars in the 100% heig…
…ht of ui-mobile-viewport-transitioning.
11aa906
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.