My favorites | Sign in
Project Home Downloads Source
READ-ONLY: This project has been archived. For more information see this post.
Search
for
  Advanced search   Search tips   Subscriptions
Issue 26: iScroll example pages overlap with status bar in full-screen
1 person starred this issue and may be notified of changes. Back to list
Status:  Invalid
Owner:  ----
Closed:  Sep 2010


 
Reported by jvcreati...@gmail.com, Sep 5, 2010
(iScroll 3.6 on iPad running iOS 3.2 and iPhone 4 running iOS 4.0.1)

Steps to reproduce:
1. Go to one of the examples included with the iScroll code.
2. Add to home screen. Load from home screen (should take up full screen).
3. The header overlaps with the status bar.

If I add margin-top: 20px; to the body, the status bar and header no longer overlap in full-screen mode, but then it looks wrong when viewing the page normally in Mobile Safari.
Sep 5, 2010
#1 jvcreati...@gmail.com
Addendum: this only applies when the black-translucent status bar style is used before adding to home screen. If the black or default style is used, the overlap doesn't occur. I supposed this is expected behavior for the black-translucent style, but should iScroll accommodate this somehow?
Sep 5, 2010
#2 bamber...@gmail.com
That's to be expected. Opaque status bar styles (normal, black) sit above the page. The black translucent style sits over the page, with 20px of content behind it. Nothing to do with iScroll.
Sep 5, 2010
Project Member #3 mat...@gmail.com
(No comment was entered for this change.)
Status: Invalid
Sep 6, 2010
#4 jvcreati...@gmail.com
I thought that might be the case. Is there a way to detect the full-screen mode and add the 20px margin automatically?
Sep 6, 2010
#5 bamber...@gmail.com
Yes. Its a property of navigator I think. Try Googling 'safari iPhone is web app fullscreen'

I think you can choose the style of status bar with a Meta tag too :)

Powered by Google Project Hosting