Geek Answers Handbook

IOS7 Safari intervenes in jQueryMobile footer

I have this code using jQuery Mobile 1.3.2. This is similar to an email application, with a fixed header / footer and scroll content between them. Works well on iOS 6 Safari.

<div data-role="header" data-position="fixed">
    <h1>Message</h1>
    <a ajax-href='@Url.Action("UpdateMsgStatus")/@msgid' data-method="post">
        <i class="icon-arrow-left icon-2x"></i>
    </a>
</div>

<div data-role="content">
    @Html.Partial("_MsgDetailsList.mobile", new List<Message>(Model))
</div>

<div data-role="footer" data-position="fixed" data-tap-toggle="false">
    <a data-href="@Url.Action("Reply", "Message")">
        <i class="icon-reply icon-2x"></i>
    </a>

    <a data-href="@Url.Action("Forward", "Message")" >
        <i class="icon-envelope icon-2x"></i>
    </a>
</div>

Now I'm upgrading to iOS 7, the new Safari is trying to maximize the screen by dynamically shortening the upper address bar and hiding the lower navigation bar when scrolling the page. This puts my footer on the real bottom of the screen. The problem is that when I try to click the buttons on the footer, it returns the browser navigation bar, compresses the footer. I have to press the button again for it to work.

Any ideas how to solve this? Thanks.

+4
1

, min-height ui- 420px . , iOS7 1321px, .

,

#login {
    min-height: 420px !important;
}

,

.ui-mobile, .ui-mobile .ui-page { min-height: 420px !important; }
0

More articles:


All Articles