This is a migrated thread and some comments may be shown as answers.

IOS7 Safari Footer Problem

3 Answers 86 Views

General Discussions

This is a migrated thread and some comments may be shown as answers.

Kevin Kembel asked on 26 Nov 2013, 04:27 PM

scrolled-to-bottom.png

I know there's been quite a bit of discussion about IOS7 problems and content being obscured, but I couldn't find any help for my issue specifically. I apologize if there is already forum on this...

I'm not looking for help with an app or phonegap, just want my mobile web app to display properly in Safari on IOS7. My problem is with the footer, the bottom Safari toolbar is obscuring my content. I've seen with other websites that the footer bar disappears when you scroll, but that doesn't happen with my Kendo app, scrolling up and down doesn't change anything - it's always blocking the bottom of my content. Since this is a mobile website that isn't just for IOS7, I'm hoping to not have to add a margin to the bottom of my page.

Here's a couple screenshots to illustrate what I mean, this is when the user has scrolled all the way down to the bottom of the page. There is a button at the very bottom that is hidden in behind the Safari toolbar that the user can't see or click on.

I read somewhere that Safari refuses to hide this bottom toolbar if the body height is set to 100%, which it looks like Kendo Mobile does. Trying to override the body height doesn't look like a good idea :-)

Anyone else run into this issue, or can point me at another blog or forum post with a solution?

3 Answers, 1 is accepted

Accepted