Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

Fixed header problem after scrolling content on iOS and Android #4337

Closed
H2Os opened this Issue · 5 comments

5 participants

@H2Os

Hi

I don't know if this is related to #4032 but I am experiencing a similar problem on iOS 5.1.1 (iPad and iPhone) when using .animate to scroll the content.

Test page here: http://actisst.biz/test.html

The '+' button in the top-right corner is programmed to toggle between scroll down and scroll up on each successive press. When the page loads, all is fine and the '+' button scrolls the page down. From then on, the buttons in the toolbar and footer do not work until the page in manually scrolled, even a tiny amount, by the user. After the content had been moved by the user, all the buttons work again.

I have tried adding $.mobile.fixedToolbars.hide() and .show() around the .animate and this solved the problem for JQM 1.0.1, but isn't available on 1.1.0 (even though the docs say it is - but that's a separate issue).

I've also tried calling $.mobile.activePage.trigger('updatelayout') but that had no effect at all.

Works as expected on Windows 7 using IE9, Chrome, FF, Safari and Opera; fails on Samsung GT-I9000 Android 2.6.32.9; fails on iPad and iPhone with iOS 5.1.1.

@Magnus-G

Hi, Just curious; did you find a solution to this issue? Thanks

@arschmitz
Owner

I set up a test case for this at http://jsfiddle.net/arschmitz/PygTy/3/show/ this appears to work fine in this simple test case. I do not believe this is a bug.

@arschmitz
Owner

setup second test case at http://jsfiddle.net/arschmitz/Lt38R/40/ tested on htc incredible android 2.3 cant replicate

@tpalomo

Gabriel tested this on an ipad with ios6 on landscape view and replicated the bug.

@arschmitz
Owner

checked this out with @tpalomo this cannot actually be replicated with ipad on ios6 however it CAN be on ipad ios5.1.1 but not on iphone ios5.1.1 this seems to be sepcific to ipad on ios 5.1.1

@arschmitz arschmitz referenced this issue from a commit in arschmitz/jquery-mobile
@arschmitz arschmitz FixedToolbar: add check to ensure toolbars are in the proper position…
… after scroll and repositioning logic. Fixed: #4337 - Fixed header problem after scrolling content on iOS and Android, #4113 - Header and footer change their position after keyboard popup - iOS, #4724 - Moving through form in Mobile Safari with "Next" and "Previous" system controls causes fixed position, tap-toggle false Header to reveal itself
3f5a5bb
@arschmitz arschmitz referenced this issue from a commit in arschmitz/jquery-mobile
@arschmitz arschmitz FixedToolbar: Added extension with browser specific workarounds Fixed:
…#3748 Android 2.x: Page transitions broken when fixed toolbars used


#4113 Header and footer change their position after keyboard popup - iOS
#4250 Persistent footer instability in v1.1 with long select lists in Android 2.3.3
#4259 Fixed toolbars change position when navigating between tabs.
#4337 Fixed header problem after scrolling content on iOS and Android
##4410 Footer navbar moves up when clicking on a textbox in an Android environment
948eeaa
@arschmitz arschmitz referenced this issue from a commit in arschmitz/jquery-mobile
@arschmitz arschmitz FixedToolbar: Added extension with browser specific workarounds Fixed: …
#3748 Android 2.x: Page transitions broken when fixed toolbars used
#4113 Header and footer change their position after keyboard popup - iOS
#4250 Persistent footer instability in v1.1 with long select lists in Android 2.3.3
#4337 Fixed header problem after scrolling content on iOS and Android
##4410 Footer navbar moves up when clicking on a textbox in an Android environment
d687da5
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.