Response title
This is preview!
Move this topic
Ongoing Page Transitions problem
in jQuery Mobile
•
10 years ago
Hi Guys,
Can I first start by saying that I absolutely love Jquery Mobile - it's a fanstastic framework for many reasons.
I was however, very disappointed to see the new features that were added in version 1.2. It seems that a lot of development time went into these features, which could have been spent trying to fix the page transition problems, which we all know about, so I wont go into.
I know what it feels like to pour hard work and enthusiasm into something and then have somebody criticise it, it doesn't feel nice, so I'm sorry. The page transition problems are not small thing. Many people have said that one issue is enough to make them adopt another framework, and I'm afraid I have to agree. I will have to use another framework for a my mobile apps. I just thought you might appreciate the feedback, and I hope so anyway.
Simon.
1
Replies(7)
Re: Ongoing Page Transitions problem
10 years ago
You may want to try reverting to jQM 1.0.1, or using watusiware's plugin that fixes the 1.1 transitions to what they were in 1.0.1. Probably a lot easier than switching to a whole different framework. 
Leave a comment on drmike01's reply
Re: Ongoing Page Transitions problem
10 years ago
I just updated jquery.mobile.simultaneous-transitions to version 1.2.
This is appropriate if you don't need to maintain scroll position (either your pages fit on the screen, or you are using iScroll or something similar).
It has the original set of 1.0.1 transitions, plus some extras, which will be increasing in the future.
I've been playing with transition times and easing, and have made some good discoveries that will be incorporated (optionally) in the future. I need to start generating the .css files from Sass, though, before it goes much further, because it is too error-prone to maintain multiple versions of the CSS files. (Currently, there is one set to replace existing transitions, and another set to add new ones with suffixed names. Now, if I alter timing and easing, that will be two more alternate CSS files.)
Basically, what I have found is this:
- IMO, ease-in should in most (but not all cases) be ditched, because of click delay and initial page rendering delays.
- It is senseless for fade transitions to use easing
- Timings should be adjusted for portrait/landscape and aspect ratio. Ideally, this should use CSS media queries to do this in ranges of aspect ratio. As it is, vertical transitions (in portrait) are too fast, although there is some adjustment in the standard transitions. I think users find it odd that transitions happen at a different rate for portrait/landscape vertical/horizontal. But it's not quite so simple, it seems more pleasing if it is some happy medium between equal time and equal rate.
I am still playing with this. But in the mean time, if you use the plug-in, then you can easily experiment and tailor to your own needs.
https://github.com/watusi/jquery.mobile.simultaneous-transitions
This is appropriate if you don't need to maintain scroll position (either your pages fit on the screen, or you are using iScroll or something similar).
It has the original set of 1.0.1 transitions, plus some extras, which will be increasing in the future.
I've been playing with transition times and easing, and have made some good discoveries that will be incorporated (optionally) in the future. I need to start generating the .css files from Sass, though, before it goes much further, because it is too error-prone to maintain multiple versions of the CSS files. (Currently, there is one set to replace existing transitions, and another set to add new ones with suffixed names. Now, if I alter timing and easing, that will be two more alternate CSS files.)
Basically, what I have found is this:
- IMO, ease-in should in most (but not all cases) be ditched, because of click delay and initial page rendering delays.
- It is senseless for fade transitions to use easing
- Timings should be adjusted for portrait/landscape and aspect ratio. Ideally, this should use CSS media queries to do this in ranges of aspect ratio. As it is, vertical transitions (in portrait) are too fast, although there is some adjustment in the standard transitions. I think users find it odd that transitions happen at a different rate for portrait/landscape vertical/horizontal. But it's not quite so simple, it seems more pleasing if it is some happy medium between equal time and equal rate.
I am still playing with this. But in the mean time, if you use the plug-in, then you can easily experiment and tailor to your own needs.
https://github.com/watusi/jquery.mobile.simultaneous-transitions
Leave a comment on watusiware's reply
Re: Ongoing Page Transitions problem
10 years ago
Watusi,
Thanks for your excellent response and for taking the time to write it. I checked out your jquery.mobile.simultaneous-transitions and your jquery.mobile.iscrollview view plugins. Great work! I'll definitely try using them in my project.
I am using JQM 1.0.1 with $.mobile.touchOverflowEnabled set to true, which works almost perfectly on the iPhone, but not on Android.
I have tried using iScroll4 but have a serious problem with it. I'm using a dynamic list, and when I apply the refresh method of iScroll, it adds loads of extra space at the bottom of the list. After it the list has been added to and refreshed a couple of times, the entire list scrolls off the top of the page and up into the heavens somewhere never to be seen again. I tried a few things but couldn't fix that one problem.
I'll try using your plugins you developed to see if solves my problem, I'll let you know how I get on.
Thanks again . . .
Simon.
Leave a comment on simbro's reply
Re: Ongoing Page Transitions problem
10 years ago
We too have been searching for a way to enjoy the simultaneous transitions, so thanks to Watusi for the plug-in. This may not be the place for this, but we are using the -replace variant, and are not having success on the iPhone. It continues to scroll to the top before starting the 'slide'.
Testing in Chrome and Firefox, and it appears to be working. Is this an iOS specific limitation, or am I missing something?
I am not using the simple handler, but will be trying that next.
Leave a comment on averacruz's reply
Re: Ongoing Page Transitions problem
10 years ago
The scroll to the top is done by the transition handler.
The simple handler I provide does not scroll to the top. So, you need it to avoid scroll to the top.
Note that - experimentally - I have also been commenting-out the call to set focus on the incoming page. This seems generally unnecessary.
But, keep in mind, if if NEEDS to scroll to the top, you probably shouldn't be using either the simple handler OR the simultaneous transitions. This is really only for pages that do not exceed the viewport height.
So, why use the simple transition handler, then? Well, the page actually is always taller than the viewport. (So, I lied, a bit. ;) ) I've seen a 1-pixel "swim" between pages, and that's eliminated using the simple handler. Plus, it's *simple*. It fits on on small screen on your desktop, and you can clearly understand what it is doing.
Other than that, make sure you are using the 1.2 version. There were some uncaught bugs in the CSS. If in doubt, use the non-replace variant. It is tricky overriding the jQuery Mobile CSS. I *think* I have it all worked-out now, but to be safe, the non-replace version doesn't conflict with the default CSS in any way.
If you are still having a problem, go ahead and put in a bug report on GitHub and make sure you show me your <head> content. I do not test this formally or have a demo yet. I just use it in my own app, (with the -replace variant) where it works great both on the simulator or device. So, if you are using the latest and it doesn't work on iPhone, there is something wrong with either the code or the docs, and I want to know about it.
The simple handler I provide does not scroll to the top. So, you need it to avoid scroll to the top.
Note that - experimentally - I have also been commenting-out the call to set focus on the incoming page. This seems generally unnecessary.
But, keep in mind, if if NEEDS to scroll to the top, you probably shouldn't be using either the simple handler OR the simultaneous transitions. This is really only for pages that do not exceed the viewport height.
So, why use the simple transition handler, then? Well, the page actually is always taller than the viewport. (So, I lied, a bit. ;) ) I've seen a 1-pixel "swim" between pages, and that's eliminated using the simple handler. Plus, it's *simple*. It fits on on small screen on your desktop, and you can clearly understand what it is doing.
Other than that, make sure you are using the 1.2 version. There were some uncaught bugs in the CSS. If in doubt, use the non-replace variant. It is tricky overriding the jQuery Mobile CSS. I *think* I have it all worked-out now, but to be safe, the non-replace version doesn't conflict with the default CSS in any way.
If you are still having a problem, go ahead and put in a bug report on GitHub and make sure you show me your <head> content. I do not test this formally or have a demo yet. I just use it in my own app, (with the -replace variant) where it works great both on the simulator or device. So, if you are using the latest and it doesn't work on iPhone, there is something wrong with either the code or the docs, and I want to know about it.
Leave a comment on watusiware's reply
Re: Ongoing Page Transitions problem
10 years ago
Hey Watusi,
I tried using your jquery.mobile.simultaneous-transitions and your jquery.mobile.iscrollview view plugins, but unfortunately I still have the same problems.
When I use jquery.mobile.simultaneous-transitions plugin I still get the 'jump-to-the-top' before slide transition issue, as averacruz and others experience.
Your jquery.mobile.iscrollview is a very tidy way of implementing iscroll, but unfortunately still doesn't fix the problem I'm having with iscroll.
When I add more items to my list and call iscroll's refresh() method, the list scrolls up off the top of the page when the user hits the bottom of the list. I've taken a screenshot to illustrate.
The blue border outlines the wrapper that iscroll is applied to - the red border is a div that all the inner content of the wrapper is placed in. See all that extra space between the red border and the blue border?
Simon
Leave a comment on simbro's reply
Re: Ongoing Page Transitions problem
10 years ago
Simon, I'd like to help you, but I need to have specifics.
First, does the demo that comes with jquery.mobile.iscrollview work correctly for you? If so, then have you first tried to follow one of the demo examples (I realize there may not be a demo page that exactly fits your need) and then modify appearance after getting that working?
Second, I need to see the content of your <head> to make sure you have things loaded in the right order. As well as the page markup so that I can see that you have the proper markup for the plugin.
Third, I need to know exactly what you are trying to achieve. That's hard to tell from just a screenshot. Is the "Load 20 More" supposed to be a fixed footer? Is it supposed to scroll with the content? I ask this because I see a footer-sized gap at the bottom in your screenshot.
It looks to me like iScroll isn't getting initialized at all. I think you are just using default page scrolling. That is why the page scrolls to the top on transition. If iScroll were properly initialized, the page height would be the same as the viewport height. (OK, a little more, because JQM adds a bit at the bottom.)
I think you need to fix iScroll issues first before you worry about transitions. Simultaneous transitions aren't going to look good until you first have iScroll or something similar working right.
I will answer questions here, but it's better to submit an issue on GitHub. This helps me to make sure that I update the documentation and demo when I find that people have trouble with some particular aspect of using the plugin.
First, does the demo that comes with jquery.mobile.iscrollview work correctly for you? If so, then have you first tried to follow one of the demo examples (I realize there may not be a demo page that exactly fits your need) and then modify appearance after getting that working?
Second, I need to see the content of your <head> to make sure you have things loaded in the right order. As well as the page markup so that I can see that you have the proper markup for the plugin.
Third, I need to know exactly what you are trying to achieve. That's hard to tell from just a screenshot. Is the "Load 20 More" supposed to be a fixed footer? Is it supposed to scroll with the content? I ask this because I see a footer-sized gap at the bottom in your screenshot.
It looks to me like iScroll isn't getting initialized at all. I think you are just using default page scrolling. That is why the page scrolls to the top on transition. If iScroll were properly initialized, the page height would be the same as the viewport height. (OK, a little more, because JQM adds a bit at the bottom.)
I think you need to fix iScroll issues first before you worry about transitions. Simultaneous transitions aren't going to look good until you first have iScroll or something similar working right.
I will answer questions here, but it's better to submit an issue on GitHub. This helps me to make sure that I update the documentation and demo when I find that people have trouble with some particular aspect of using the plugin.
Leave a comment on watusiware's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to simbro's question