New issue

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

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Slide transition jumps to top of previous page #2884

Closed
ahutch opened this Issue Oct 29, 2011 · 13 comments

Comments

Projects
None yet
8 participants
@ahutch

ahutch commented Oct 29, 2011

When you use a slide transition on a page that is large enough to scroll the transition is very jumpy. The previous page will scroll to the top before the transition begins and jumps back at the end of the transition. This is very disorientating especially on an Iphone where things occur very slowly. (Tested on safari and mobile safari)

  1. Go to http://jquerymobile.com/test/docs/lists/index.html
  2. Make the page narrow enough to see the slide transition and short enough to have a scroll bar and scroll to the bottom.
  3. Click on a link to transition to the next page. (See the jump)
  4. Use the back/forward button to see the jump over and over.
  5. The page will eventually stop scrolling to its previous position and stop jumping.
@toddparker

This comment has been minimized.

Contributor

toddparker commented Oct 31, 2011

Yes, this is an artifact of the fact that we need to scroll to the top before starting the transition and we also restore the scroll position if you go back. Closing as a duplicate of #455

We're kicking around ideas on different approaches to improve this post-1.0

@toddparker toddparker closed this Oct 31, 2011

@ki11ua

This comment has been minimized.

ki11ua commented Nov 9, 2011

Sorry for reopening this, but it's really important issue for my implementations as well.
Could you please provide a workaround/solution for smooth scrolling to top before new page transitions?
Thank you.

@toddparker

This comment has been minimized.

Contributor

toddparker commented Nov 9, 2011

As I said, there isn't a workaround given the tech constraints. You can turn on touchIverflow to make this issue go away in ios 5 but that is the only option right now.

@ki11ua

This comment has been minimized.

ki11ua commented Nov 9, 2011

One last thing: how about something like this .animate({scrollTop:0}, 2000, 'ease'), to use scrolltop as a method through animation, in order to have more pleasing effect.

@ahutch

This comment has been minimized.

ahutch commented Nov 14, 2011

@toddparker, In regards to touchoverflow- I tried to enable this on the Ipad. Unfortunately the listviews do not render when they scroll into view. On an Iphone it was my intention to avoid a scrolling div (the page contains only one div) as there is no scroll bar and it is confusing for the user.

@schvenk

This comment has been minimized.

schvenk commented Nov 14, 2011

I'm sad to hear this isn't a priority pre-1.0. jQuery Mobile is such a promising framework...but this bug alone would prevent me from using it.

@toddparker

This comment has been minimized.

Contributor

toddparker commented Nov 15, 2011

It's not that ist wasn't a priority, but the changes required are far too large at the RC or even beta stage to make. It's #1 on our list for 1.1

@schvenk

This comment has been minimized.

schvenk commented Nov 22, 2011

Glad to hear it. Thanks!

@ki11ua

This comment has been minimized.

ki11ua commented Nov 22, 2011

Thank you!

@role2000

This comment has been minimized.

role2000 commented Aug 22, 2012

So 1.1.1. is out there but the jump still persists :-0
You can see it here http://jquerymobile.com/demos/1.1.1/docs/lists/index.html (use steps described above by ahutch)
In my phonegap app i see the same even with $.mobile.defaultPageTransition = "none"; but only if i use the back button and
jump back to a page with a list. How to prevent it in generell or
just for backward navigation?

@vip32

This comment has been minimized.

vip32 commented Oct 16, 2012

this also happens with transition 'none'. jumps to start and then navigate to target page. i accept that it is a transition implementation detail, but when not using a transition the effect is still there (1.1.1)!? is there a workaround, it's so ugly it makes my want skip jqm alltogether.

@mrudulachunduri

This comment has been minimized.

mrudulachunduri commented Feb 5, 2013

This issue still persists in JQM 1.2.0 even for transition as "none". Is there any workaround for this?

@dustmoo

This comment has been minimized.

dustmoo commented Mar 14, 2013

This problem still persists in JQM 1.3.0 and is very frustrating. This is not a consistent user experience. Also, changing the MS of the css transitions is not changing the speed. Any word on this?

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