Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

Open keyboard on iPad iOS5 caused fixed footer to scroll with content. #4391

Closed
jaurand opened this Issue · 16 comments

9 participants

@jaurand

This is reproducible here: http://jquerymobile.com/test/docs/toolbars/bars-fixed-forms-b.html

Using an iPad with iOS5:
1. Tap an input at the top of the page to bring up the keyboard.
2. With the keyboard still visible, scroll down the page.

You will see the footer scrolling with the rest of the content.

@agcolom
Collaborator

Is this a duplicate of #4113 ?

@agcolom
Collaborator

@jaurand could you also please confirm which iOS 5 you are experiencing this issue with? (5.0.1, 5.1 or 5.1.1?)

Thanks,

@davidlilin

I can reproduce it on my iPad with OS 5.0.1

@agcolom
Collaborator

@davidlilin Thanks for that. Which iPad was that?
EDIT : I said all ok for me but I thought I was in a different thread!

@agcolom
Collaborator

@davidlilin Sorry, IGNORE my above comment, I thought it was for a different issue!!!!

@davidlilin

If you scroll to the middle of Page, then tap in the input on header, after keyboard pops up you will see the header bar will jump to the middle of the page. My iPad is iPad 2 with iOS 5.0.1

http://jquerymobile.com/test/docs/toolbars/bars-fixed-forms-b.html

@mletynski

Yes its duplication of 4113. I think footer should be hidden when keyboard pops up or just stay in its position. The original fix was for smaller devices but it also does not work when page scroll's.

@jaspermdegroot
Collaborator

@agcolom - Hi Anne, I suggest to close this issue as duplicate of #4113 so we concentrate the discussion and testing there. Is that ok with you?

@agcolom
Collaborator

@uGoMobi - Hi Jasper, yes, ok to close this one as it is a duplicate of #4113.

@jtara

Um. We have a catch-22.

4113 is closed because it is a duplicate of this issue.

This issue is closed because it is a duplicate of 4113.

@jaspermdegroot
Collaborator

@jtara - #4113 isn't closed

@jtara

Sorry - misread. That was THIS issue being closed.

@stuartver

This is the fix

        $(document).on('focus', 'input, textarea', function() {
            setTimeout(function() {
                window.scrollTo(document.body.scrollLeft, document.body.scrollTop);
            }, 0);
        });
@bocodigital

This doesnt appear to be fixed as I am currently experiencing the same bug with 1.3.1

@MCBL

The following snippet cause a very little flickering effect but solves the problem! Header get's positioned correctly. Please let me know if it's not the case for you. Hope it helps! :)

Note: The event is not focus but blur.

$(document).on('blur', 'input, textarea', function() {
    setTimeout(function() {
        window.scrollTo(document.body.scrollLeft, document.body.scrollTop);
    }, 0);
});

@stuartver: Do you agree?

@MCBL

A very important thing to note, is that it seems to only appear if the page height is less than the screen/viewport, and never happen on long page.

iOS 6, 7 and 8.

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.