Apache Cordova
  1. Apache Cordova
  2. CB-263

PhoneGap Splash screen is incorrectly positioned

    Details

    • Type: Bug Bug
    • Status: Resolved
    • Priority: Minor Minor
    • Resolution: Fixed
    • Affects Version/s: 1.4.0
    • Fix Version/s: 1.7.0
    • Component/s: iOS
    • Labels:
      None
    • Environment:

      Xcode 4.2, PhoneGap 1.4.1

      Description

      The splash screen image view is offset up by a distance that appears to be equal to the height of the status bar. As a result, user can see portion of the white web view at the bottom of the screen. The perceived effect is that the launch image briefly jumps up just before the web view is revealed.

      To reproduce, set up a project like this:

      • Create new PhoneGap 1.4.1 iOS project.
      • Add info plist entry with key "Launch image (iPad)" and value "iPad".
      • Add iPad-Landscape.png and iPad-Portrait.png to project's Resources group. I used solid red images (for contrast) of standard size (768x1004 and 1024x748).

      Run the project in iOS 5 simulator or an iOS 5 iPad to see the splash jump up.

      The problem seems to be that [PGViewController showSplashScreen] does not account for status bar when it sizes and positions the image view.

        Activity

        Hide
        Alex Talis added a comment -

        I worked around this for now by making launch images 20 pixels taller (768x1024 and 1024x768). However, this should be fixed to work with image sizes specified by Apple here: https://developer.apple.com/library/ios/#documentation/userexperience/conceptual/mobilehig/IconsImages/IconsImages.html

        Show
        Alex Talis added a comment - I worked around this for now by making launch images 20 pixels taller (768x1024 and 1024x768). However, this should be fixed to work with image sizes specified by Apple here: https://developer.apple.com/library/ios/#documentation/userexperience/conceptual/mobilehig/IconsImages/IconsImages.html
        Hide
        Shazron Abdullah added a comment -

        The fix is indeed having 1024x768, and this is specific for Cordova's requirements since we are trying to "match" the behaviour of the default splashscreen and are doing transformations on it.

        Show
        Shazron Abdullah added a comment - The fix is indeed having 1024x768, and this is specific for Cordova's requirements since we are trying to "match" the behaviour of the default splashscreen and are doing transformations on it.
        Hide
        Alex Talis added a comment -

        That's definitely workable for now. Hopefully Apple won't decide that using non-standard launch image sizes is a "violation". It would be nice if this work around was easier to find without having to debug into PG source code. I googled this quite a bit but the most helpful thing I found was that some people modified source code to use application frame instead of screen bounds. Increasing image sizes is a much cleaner work around.

        Show
        Alex Talis added a comment - That's definitely workable for now. Hopefully Apple won't decide that using non-standard launch image sizes is a "violation". It would be nice if this work around was easier to find without having to debug into PG source code. I googled this quite a bit but the most helpful thing I found was that some people modified source code to use application frame instead of screen bounds. Increasing image sizes is a much cleaner work around.
        Hide
        Paul Cisneros added a comment -

        This fix works. Does anyone know if Apple is rejecting apps because of the images not being sized in the Human Interface Guidelines?

        Show
        Paul Cisneros added a comment - This fix works. Does anyone know if Apple is rejecting apps because of the images not being sized in the Human Interface Guidelines?
        Hide
        Randy McMillan added a comment -

        My apps haven't been rejected using the 1024x768 dimensions

        Also incorporating

        @property(nonatomic,getter=isStatusBarHidden) BOOL statusBarHidden;

        into the AppDelegate.h

        and in AppDelegate.m

        @synthesize invokeString, window, viewController, statusBarHidden;

        if ( [UIApplication sharedApplication].statusBarHidden == YES)

        { NSLog(@"StatusBar is hidden!"); //adjust splash dimensions }

        becomes useful.

        This would also have benefits for plugins that need to adjust view dimensions as well.

        For example in SMSComposer.m Line 56

        https://github.com/phonegap/phonegap-plugins/blob/master/iOS/SMSComposer/SMSComposer.m

        Show
        Randy McMillan added a comment - My apps haven't been rejected using the 1024x768 dimensions Also incorporating @property(nonatomic,getter=isStatusBarHidden) BOOL statusBarHidden; into the AppDelegate.h and in AppDelegate.m @synthesize invokeString, window, viewController, statusBarHidden; if ( [UIApplication sharedApplication] .statusBarHidden == YES) { NSLog(@"StatusBar is hidden!"); //adjust splash dimensions } becomes useful. This would also have benefits for plugins that need to adjust view dimensions as well. For example in SMSComposer.m Line 56 https://github.com/phonegap/phonegap-plugins/blob/master/iOS/SMSComposer/SMSComposer.m
        Hide
        Paul Cisneros added a comment -

        @Randy Thanks for the code. I'm really a complete novice when it comes to Objective-C.

        Is this one whole block of code for the AppDelegate.m:

        @synthesize invokeString, window, viewController, statusBarHidden;

        if ( [UIApplication sharedApplication].statusBarHidden == YES)

        { NSLog(@"StatusBar is hidden!"); //adjust splash dimensions }
        becomes useful.

        And does this all go at the top just below the headers? Or is the IF statement to be placed elsewhere in the same file? I'm getting errors when trying to place:

        if ( [UIApplication sharedApplication].statusBarHidden == YES)
        { NSLog(@"StatusBar is hidden!"); //adjust splash dimensions }

        Thanks in advance!

        Show
        Paul Cisneros added a comment - @Randy Thanks for the code. I'm really a complete novice when it comes to Objective-C. Is this one whole block of code for the AppDelegate.m: @synthesize invokeString, window, viewController, statusBarHidden; if ( [UIApplication sharedApplication] .statusBarHidden == YES) { NSLog(@"StatusBar is hidden!"); //adjust splash dimensions } becomes useful. And does this all go at the top just below the headers? Or is the IF statement to be placed elsewhere in the same file? I'm getting errors when trying to place: if ( [UIApplication sharedApplication] .statusBarHidden == YES) { NSLog(@"StatusBar is hidden!"); //adjust splash dimensions } Thanks in advance!
        Hide
        Randy McMillan added a comment -

        Id just ignore the warnings in the app summary but the code below will offer some insight on how to make further mods to the viewController.view.frame if you need to. Compare to the default AppDelegate.h/m for differences.

        https://gist.github.com/2339195

        Show
        Randy McMillan added a comment - Id just ignore the warnings in the app summary but the code below will offer some insight on how to make further mods to the viewController.view.frame if you need to. Compare to the default AppDelegate.h/m for differences. https://gist.github.com/2339195
        Hide
        Tom Clarkson added a comment -

        The issue is that the iOS instance of the 1024x748 image is placed wherever the status bar isn't, while the Cordova instance has a fixed position.

        I have uploaded a fix: https://github.com/apache/incubator-cordova-ios/pull/14

        Also a variation of the same fix that works on top of the existing library code:

        http://tqcblog.com/2012/04/20/fixing-the-phonegap-cordova-splash-screen/

        Show
        Tom Clarkson added a comment - The issue is that the iOS instance of the 1024x748 image is placed wherever the status bar isn't, while the Cordova instance has a fixed position. I have uploaded a fix: https://github.com/apache/incubator-cordova-ios/pull/14 Also a variation of the same fix that works on top of the existing library code: http://tqcblog.com/2012/04/20/fixing-the-phonegap-cordova-splash-screen/
        Show
        Shazron Abdullah added a comment - Fix commit: http://git-wip-us.apache.org/repos/asf/incubator-cordova-ios/commit/73620e43
        Hide
        John P added a comment -

        I'm seeing this issue in 1.8.1. Is this a known issue?

        Show
        John P added a comment - I'm seeing this issue in 1.8.1. Is this a known issue?

          People

          • Assignee:
            Shazron Abdullah
            Reporter:
            Alex Talis
          • Votes:
            0 Vote for this issue
            Watchers:
            3 Start watching this issue

            Dates

            • Created:
              Updated:
              Resolved:

              Development