Starting with ios 8 all webapps (web pages opened in standalone mode) are shifted up by the height of status bar so that the status bar appears over the page and you will have an empty area at the button of the page. the page height is incorrectly reported as 748 in landscape mode of ipad Air. minimal html: ---------------------------------- <!DOCTYPE html!> <html> <head> <meta name="apple-mobile-web-app-capable" content="yes"/> <meta name="apple-mobile-web-status-bar-style" content="black"/> <link rel='stylesheet' href='site.css'/> </head> <body> </body> </html> ------------------------------ minimal CSS site.css: ------------------------------ html, body{ height:100%; } body{ background-color:blue; } ------------------------------ you would be able to see the white strip on the bottom of the page in standalone mode.
<rdar://problem/18541363>
as a workaround, open your web app in portrait mode and then you can rotate it to landscape. it works fine when open the app in portrait mode.
Is there any chance of getting this fixed? It requires a bunch of annoying workarounds specific to iPad and iOS8. iOS7 works fine, and iOS8 on iPhone doesn't exhibit this problem. Obviously impacting a lot of developers, as lots of stack overlow discussion on the topic.
Still present in 8.2, this happens if the webapp is open when the device orientation is anything but straight (on landscape and in up-side-down portrait). Note that on the first launch from the homescreen, even when the content is not shifted up (in straight portrait mode), the status bar text content is invisible (maybe the same color as the background). Then it appears normally on the next launch.
The fix for this issue was needed outside the WebKit project, therefore this is being resolved as 'Moved'. This should now be fixed in shipping software.