iOS 13 Webview Shifted after Camera Closed

[m-s-morgan]

Bug Report

Problem

When either the camera or the image picker is pulled up and then closed either by canceling or performing the intended action, the entire webview is shifted up so that it appears as if the status bar is overlaying the webview (app content is behind the status bar).

What is expected to happen?

The webview should appear as it did when the camera or image picker was initially launched.

What does actually happen?

Upon close, the webview is behind the status bar.

Information

This only appears to happen in iOS 13 with the cordova-plugin-camera. I am using the cordova-plugin-wkwebview, but no other plugins seem to shift the webview so I'm assuming it's either an issue with this plugin or how something this plugin is doing reacts with the wkwebview.

Command or Code

Launch the camera or image picker, then close it.

Environment, Platform, Device

IPhone X with iOS 13.1.

Version information

Cordova 9.0.0 cordova-plugin-camera 4.1.0

Checklist

• [x] I searched for existing GitHub issues
• [x] I updated all Cordova tooling to most recent version
• [x] I included all the necessary information above

[m-s-morgan]

UPDATE

After diving into this further, it appears that in iOS 13 the camera plugin view makes the height of the sharedApplication statusBarFrame 0. This causes the status bar plugin to set the origin to 0. At this point I'm not really sure if this is a problem with this plugin or the status bar plugin, so I'll leave it here unless you feel it should be closed.

[Crash--]

I had the same issue. My current workaround is to not hide the statusBar (https://github.com/cozy/cordova-plugin-camera/pull/2/files). It works as expected in my app but I don't know exactly the impact of this change in other scenarios.

[m-s-morgan]

@Crash-- appreciate it. Yeah it seems that hiding the status bar makes the height 0 when reading the value. This creates a race condition where the status bar plugin refreshes the view before the status bar is "unhidden" giving it an actual value for the height. I would probably consider this an issue with the statusbar plugin but I can't seem to find a good way to get the height of the status bar while hidden or have the status bar wait to refresh until after it's shown. I feel like a better way to do this would be to use safe area properties on the webview but I've seen issues with doing that as well.

[crees1]

Having this issue as well. This also occurs with the video camera plugin so its not unique to this one. Seems like maybe it should be fixed in the status bar plugin as suggested.

[markerio]

We're experiencing the same issue in our app.

Affected plugins are:

1. cordova-plugin-camera [Image/Video Picking | Take photo from camera]
2. cordova-plugin-media-capture [Image/Video Capturing]

Apparently, after you get back from the Gallery or Camera app, you immediately notice a top shift in the webview, due to hiding the status bar. iOS 13 does not re-show the status bar as usual.

We concluded 3 solutions by now:

1. To manually re-show the status bar once we get back from the Gallery/Camera apps. [Fast but ugly solution]
2. Configure the app to hide the status bar through config.xml. Then, you have to adjust the webview using css Safearea properties to leave a space for the status bar. (As mentioned by @m-s-morgan). [Recommended]
3. Control the status bar display issue from the plugin itself. Thanks for @Crash-- for his tip on this field.

We managed to solve this by using the second solution because we felt its the safest by now. However, because our app is so huge, we had to go through our css files and adjust all the properties, which is very time consuming.

If you choose to go with the second solution, you need to edit the config.xml file as: <preference name="StatusBarOverlaysWebView" value="true" />

This will make your app's webview sliding below the top status bar. Please beware that, if you check screen heights in your app using javascript, you may need to double check the values because the viewport height is affected.

Thanks for @m-s-morgan and @Crash-- for their feedbacks.

[jcesarmobile]

moving to cordova-plugin-statusbar, that's the plugin doing the resizing and causing the issue

[AlexanderStasyuk]

Have similar issue with our app. It happens via getting to use camera two different ways:

1. When using cordova-plugin-camera to capture photo or photo picker the issue happens.
2. Also, if using the input type="file" way to use the webview/safari api to access camera or photo picker.

The way #1 is resolved by using the solution purposed by @Crash-- But way #2 still persists. In the way #2 we are not using cordova-plugin-camera but using the native web browser/view api. Thus probably solution needs to be implemented in the cordova-plugin-statusbar or some other clever css way that has been suggested by @markerio

[rafaelmrdyn]

statusBar.hide(); statusBar.show(); :))) not a good way but fixed

[lentyaishe]

statusBar.hide(); statusBar.show(); :))) not a good way but fixed

My solution was exactly the same and it does the job. Put it in both success and error calls of your camera.getPicture().

[tryhardest]

@jcesarmobile actually the comment you posted "moving to cordova-plugin-statusbar, that's the plugin doing the resizing and causing the issue" might be incorrect? Due to the fact that yes, it IS the statusBar causing this, but even without the statusBar plugin we experience this on Android. When we programatically remove statusBar it does not occur. But even without plugin, it does.

[jcesarmobile]

well, the issue is for iOS and it was fixed in the statusbar plugin already, so I'm not wrong, you are just facing a different issue.

[tryhardest]

@jcesarmobile yes I guess both are true. Have you any suggestions for handing a status bar webview jump on Android (with or without the statusBar plugin)?

[dolin-tan]

in iOS When we use the camera plugin to take pictures or select pictures, the plugin will automatically make "StatusBarOverlaysWebView" true , So it will cause the page to move up，I have installed the latest version of the camera plugin, but there is still a problem @jcesarmobile

[singhc00]

Have similar issue with our app. It happens via getting to use camera two different ways:

1. When using cordova-plugin-camera to capture photo or photo picker the issue happens.
2. Also, if using the input type="file" way to use the webview/safari api to access camera or photo picker.

The way #1 is resolved by using the solution purposed by @Crash-- But way #2 still persists. In the way #2 we are not using cordova-plugin-camera but using the native web browser/view api. Thus probably solution needs to be implemented in the cordova-plugin-statusbar or some other clever css way that has been suggested by @markerio

Hi

Did you end up finding a solution for the issue where it shifts the app behind the Status bar when using the camera from the i.e. Safari Webview input file element?