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

Panel with content taller than page causes scroll position to jump up when resizing screen or scrolling on mobile. #7572

Closed
bessiambre opened this Issue Jul 16, 2014 · 3 comments

Comments

Projects
None yet
2 participants
@bessiambre
  1. Open panel with tall content
  2. Scroll down past the page content.
  3. Resize browser window.

The scroll position jumps up (probably to the top).

http://jsbin.com/lekok/1/edit

This is particularly bad on mobile (tested on android chrome) because scrolling up and down shows and hides the address bar which triggers resize events and makes scroll position jump.

I initially though this had the same root cause as issue
#7529 . However, it seems the suggested fix is not enough to solve the problem because it also happens when setting page.css min-height in resetActivePageHeight() which is triggered on resize.

@bessiambre

This comment has been minimized.

Show comment
Hide comment
@bessiambre

bessiambre Jul 16, 2014

Additional debuging information:

I had to set a watch on document.body.scrollTop to see it change while stepping through page.css('min-height'... as the scroll position only becomes visible later in chrome after the resize event callbacks are finished executing. My guess of what is happening is that when min-height is modified there is a glitch between the old and new values where the scroll bar position is calculated as if no min-height was set, based on the page height without taking into account the panel height because it is position:absolute. Not sure what is the best way to solve this.

Additional debuging information:

I had to set a watch on document.body.scrollTop to see it change while stepping through page.css('min-height'... as the scroll position only becomes visible later in chrome after the resize event callbacks are finished executing. My guess of what is happening is that when min-height is modified there is a glitch between the old and new values where the scroll bar position is calculated as if no min-height was set, based on the page height without taking into account the panel height because it is position:absolute. Not sure what is the best way to solve this.

shao1555 added a commit to shao1555/jquery-mobile that referenced this issue Sep 17, 2014

Panel: no longer jump up on resize
should not scroll to top in just resize window

Fixes #7572

shao1555 added a commit to shao1555/jquery-mobile that referenced this issue Sep 17, 2014

Panel: no longer jump up on resize
should not scroll to top in just resize window

Fixes #7572

gabrielschulhof added a commit to gabrielschulhof/jquery-mobile that referenced this issue Jan 19, 2015

Panel: no longer jump up on resize
should not scroll to top in just resize window

Fixes gh-7572
Closes gh-7674

@gabrielschulhof gabrielschulhof added this to the 1.5.0 milestone Jan 19, 2015

@gabrielschulhof gabrielschulhof self-assigned this Jan 19, 2015

@gabrielschulhof

This comment has been minimized.

Show comment
Hide comment
@gabrielschulhof

gabrielschulhof Jan 19, 2015

Contributor

Interestingly, this is no longer reproducible if you reference jQuery Mobile git from the CDN, but it is reproducible if you reference jQuery Mobile from js/index.php ... the inclusion order must be influencing things.

Contributor

gabrielschulhof commented Jan 19, 2015

Interestingly, this is no longer reproducible if you reference jQuery Mobile git from the CDN, but it is reproducible if you reference jQuery Mobile from js/index.php ... the inclusion order must be influencing things.

@gabrielschulhof

This comment has been minimized.

Show comment
Hide comment
@gabrielschulhof

gabrielschulhof Jan 20, 2015

Contributor

... or, rather, the lack of inclusion of events.js (which pulls throttledresize into the build), as I found out in #7925 ...

Contributor

gabrielschulhof commented Jan 20, 2015

... or, rather, the lack of inclusion of events.js (which pulls throttledresize into the build), as I found out in #7925 ...

kakul added a commit to kakul/jquery-mobile that referenced this issue Apr 14, 2015

Panel: no longer jump up on resize
should not scroll to top in just resize window

Fixes gh-7572
Closes gh-7674

nak0yui added a commit to rio-development/jquery-mobile that referenced this issue Jun 30, 2015

Panel: no longer jump up on resize
should not scroll to top in just resize window

Fixes gh-7572
Closes gh-7674
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment