iOS 11.1 has white bar after map plugin upgrade to 2.4.6

spacesuitdiver commented 5 years ago

I'm submitting a ... (check one with "x")

[ ] question
[x] any problem or bug report

OS: (check one with "x")

[ ] Android
[x] iOS
[ ] Browser

cordova information: (run $> cordova plugin list)

Before (2.4.0):

branch-cordova-sdk 3.0.0 "branch-cordova-sdk"
com.googlemaps.ios 2.7.0 "Google Maps SDK for iOS"
com.mbppower.camerapreview 0.0.8 "cordova-plugin-camera-preview"
com.phonegap.plugins.facebookconnect 1.7.1.3 "Facebook"
cordova-android-support-gradle-release 1.4.4 "cordova-android-support-gradle-release"
cordova-ios-plugin-no-export-compliance 0.0.5 "iOS No Export Compliance"
cordova-launch-review 3.1.0 "Launch Review"
cordova-plugin-app-version 0.1.8 "AppVersion"
cordova-plugin-appavailability 0.4.1 "AppAvailability"
cordova-plugin-backbutton 0.3.0 "Backbutton"
cordova-plugin-camera 2.4.1 "Camera"
cordova-plugin-compat 1.2.0 "Compat"
cordova-plugin-cszbar 1.3.2 "ZBar barcode scanner"
cordova-plugin-datepicker 0.9.3 "DatePicker"
cordova-plugin-device 1.1.6 "Device"
cordova-plugin-dialogs 1.3.3 "Notification"
cordova-plugin-disable-bitcode 1.3.2 "DisableBitcode"
cordova-plugin-file 4.3.3 "File"
cordova-plugin-file-transfer 1.6.3 "File Transfer"
cordova-plugin-geolocation 2.4.3 "Geolocation"
cordova-plugin-globalization 1.0.9 "Globalization"
cordova-plugin-google-analytics 1.8.3 "Google Universal Analytics Plugin"
cordova-plugin-googlemaps 2.3.11-beta-20180806-1918 "cordova-plugin-googlemaps"
cordova-plugin-googleplus 5.3.0 "Google SignIn"
cordova-plugin-inappbrowser 1.7.1 "InAppBrowser"
cordova-plugin-intercom 4.1.2 "Intercom"
cordova-plugin-localization-strings 1.1.1 "Localization"
cordova-plugin-nativestorage 2.3.1 "NativeStorage"
cordova-plugin-network-information 1.3.3 "Network Information"
cordova-plugin-okhttp 2.0.0 "OkHttp"
cordova-plugin-screen-orientation 2.0.1 "Screen Orientation"
cordova-plugin-spinner-dialog 1.3.1 "SpinnerDialog"
cordova-plugin-splashscreen 4.0.3 "Splashscreen"
cordova-plugin-statusbar 2.4.3-dev "StatusBar"
cordova-plugin-uniquedeviceid 1.3.2 "UniqueDeviceID"
cordova-plugin-whitelist 1.3.2 "Whitelist"
cordova-plugin-x-socialsharing 5.0.12 "SocialSharing"
cordova.plugins.diagnostic 4.0.8 "Diagnostic"
es6-promise-plugin 4.2.2 "Promise"
ionic-plugin-keyboard 2.2.1 "Keyboard"
phonegap-plugin-push 2.1.3 "PushPlugin"

After (2.4.6):

branch-cordova-sdk 3.0.0 "branch-cordova-sdk"
com.mbppower.camerapreview 0.0.8 "cordova-plugin-camera-preview"
com.phonegap.plugins.facebookconnect 1.7.1.3 "Facebook"
cordova-android-support-gradle-release 1.4.4 "cordova-android-support-gradle-release"
cordova-ios-plugin-no-export-compliance 0.0.5 "iOS No Export Compliance"
cordova-launch-review 3.1.0 "Launch Review"
cordova-plugin-app-version 0.1.8 "AppVersion"
cordova-plugin-appavailability 0.4.1 "AppAvailability"
cordova-plugin-backbutton 0.3.0 "Backbutton"
cordova-plugin-camera 2.4.1 "Camera"
cordova-plugin-compat 1.2.0 "Compat"
cordova-plugin-cszbar 1.3.2 "ZBar barcode scanner"
cordova-plugin-datepicker 0.9.3 "DatePicker"
cordova-plugin-device 1.1.6 "Device"
cordova-plugin-dialogs 1.3.3 "Notification"
cordova-plugin-disable-bitcode 1.3.2 "DisableBitcode"
cordova-plugin-file 4.3.3 "File"
cordova-plugin-file-transfer 1.6.3 "File Transfer"
cordova-plugin-geolocation 2.4.3 "Geolocation"
cordova-plugin-globalization 1.0.9 "Globalization"
cordova-plugin-google-analytics 1.8.3 "Google Universal Analytics Plugin"
cordova-plugin-googlemaps 2.4.6 "cordova-plugin-googlemaps"
cordova-plugin-googleplus 5.3.0 "Google SignIn"
cordova-plugin-inappbrowser 1.7.1 "InAppBrowser"
cordova-plugin-intercom 4.1.2 "Intercom"
cordova-plugin-localization-strings 1.1.1 "Localization"
cordova-plugin-nativestorage 2.3.1 "NativeStorage"
cordova-plugin-network-information 1.3.3 "Network Information"
cordova-plugin-okhttp 2.0.0 "OkHttp"
cordova-plugin-screen-orientation 2.0.1 "Screen Orientation"
cordova-plugin-spinner-dialog 1.3.1 "SpinnerDialog"
cordova-plugin-splashscreen 4.0.3 "Splashscreen"
cordova-plugin-statusbar 2.4.3-dev "StatusBar"
cordova-plugin-uniquedeviceid 1.3.2 "UniqueDeviceID"
cordova-plugin-whitelist 1.3.2 "Whitelist"
cordova-plugin-x-socialsharing 5.0.12 "SocialSharing"
cordova.plugins.diagnostic 4.0.8 "Diagnostic"
es6-promise-plugin 4.2.2 "Promise"
ionic-plugin-keyboard 2.2.1 "Keyboard"
phonegap-plugin-push 2.1.3 "PushPlugin"

Current behavior: It seems the Webview and any other native plugin is shifted up on iOS 11.1.

Expected behavior: Webview should span the proper device height.

Screen capture or video record: Before (2.4.0):

After (2.4.6):

wf9a5m75 commented 5 years ago

Please share the reproduce project files on github.

spacesuitdiver commented 5 years ago

@wf9a5m75 it doesn't happen on 2.4.4 plugin version so using that for now. I'm assuming it's a regression introduced by #2432. Let me know what you think.

This is what's in our index.html.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Security-Policy" content="
        default-src * 'self' gap://ready cdvfile://* data: filesystem: blob:;
        style-src 'unsafe-inline' 'self' cdvfile://* filesystem: blob:;
        script-src 'self' 'unsafe-inline' 'unsafe-eval' cdvfile://* filesystem: https://fast.wistia.com https://src.litix.io"
    >
    <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <script>
    var externalUrl, externalUrlHandler;
    function handleOpenURL(url) {
        if (!externalUrlHandler) {
            if (externalUrl) {
                console.warn('Disregarding unhandled external url: ', externalUrl);
            }
            externalUrl = url;
        } else {
            externalUrlHandler(url);
        }
    }
    function setExternalUrlHandler(f) {
        externalUrlHandler = f;
        if (externalUrl) {
            externalUrlHandler(externalUrl);
            externalUrl = null;
        }
    }
    </script>
<link href="fonts.css" rel="stylesheet"><link href="styles.css" rel="stylesheet"></head>
<body>
    <ui-view>
        <div id="indexSplash">
            <div class="indexLogo"></div>
            <div id="indexSplashLabel">Signing in&hellip;</div>
        </div>
    </ui-view>
    <script src="cordova.js"></script>
<script type="text/javascript" src="app.js"></script><script type="text/javascript" src="fonts.js"></script><script type="text/javascript" src="styles.js"></script>
</body>
</html>

wf9a5m75 commented 5 years ago

@chadevans ping

wf9a5m75 commented 5 years ago

Please create a simple project that reproduce your issue 100%, then share it on github.

chadevans commented 5 years ago

Happy to help if there is a sample project.

chadevans commented 5 years ago

If not that, at least the css and a screenshot of the DOM viewport meta tag.

wf9a5m75 commented 5 years ago

@chadevans thanks for jumping on.

spacesuitdiver commented 5 years ago

@chadevans above is the meta tags for the project. I'll see about bootstrapping a new project, I haven't in so long though. Simply setting the body tag to absolute and filling it should reproduce the issue as the Webview itself does not take up the full device dimensions.

chadevans commented 5 years ago

Meta tags in chrome devtools DOM, this plugin modifies the viewport meta tag.

chadevans commented 5 years ago

Nevermind you are talking iOS.. try Safari Inspector.

chadevans commented 5 years ago

The change had to do with whether viewport-fit=cover is added or not to viewport meta tag. This mode respects the safe areas Apple introduced in iOS 11 and Google in Chrome 69. I don’t know why there would be a safe area at the bottom. Seeing relevant CSS would be very helpful. The bar at the bottom looks 20px or so which is height of the menu bar... that’s the only clue I have.

spacesuitdiver commented 5 years ago

@chadevans building 2.4.6 again to take a look in Safari, one sec.

chadevans commented 5 years ago

One more Q, did you upgrade any other plugins at the same time

spacesuitdiver commented 5 years ago

@chadevans no.

chadevans commented 5 years ago

11.1 only?

spacesuitdiver commented 5 years ago

11.1 only?

I can load some other versions but >11.1 works fine.

Nevermind you are talking iOS.. try Safari Inspector.

2.4.4:

<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, viewport-fit=cover">

2.4.6:


<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

Looks like 2.4.6 removes the viewport-fit=cover

spacesuitdiver commented 5 years ago

Please share the reproduce project files on github.

We're also working on sandboxing a version for additional help because we have been trying to release our app with v2 maps coming from v1 and about 10% of the time the map just renders white with no error and map ready fired just fine. Will look for the issue I mentioned this in, looked a bit and couldn't find it.

chadevans commented 5 years ago

@spacesuitdiver

Thanks for the update - I've tested an app using the latest cordova-plugin-googlemaps 2.4.6.

I'm getting viewport-fit=cover in my DOM and no issues with map. This is on iPhone 8+ w/ iOS 12, I'm downloading 11.1 and iPhone SE to more closely match your testing.

I'm using an Ionic app so there may be some differences there in how the DOM is loaded.. look forward to being able to test on your Cordova sandbox.

spacesuitdiver commented 5 years ago

@chadevans this issue is for certain not an issue on 12 only < 11.2.

wf9a5m75 commented 5 years ago

@spacesuitdiver We are still waiting the project that is reproduce your issue.

chadevans commented 5 years ago

@spacesuitdiver ah, this piece of info helps me understand. iOS 11.1 or less.

Now I remember, 11.0 and 11.1 called what is now env(), it was called constant(). Working to reproduce issue on 11.1 and should be able to fix.

spacesuitdiver commented 5 years ago

@spacesuitdiver We are still waiting the project that is reproduce your issue.

Me too ;)

chadevans commented 5 years ago

@spacesuitdiver try changing line 69 in pluginInit.js to this:

var envTestDiv = '<div id="envTest" style="margin-top:-99px;margin-top:constant(safe-area-inset-top);margin-top:env(safe-area-inset-top);position:absolute;z-index:-1;"></div>';

(run a console log or alert to make sure your change isn't overwritten on build)

wf9a5m75 commented 5 years ago

@spacesuitdiver ping

wf9a5m75 commented 5 years ago

@spacesuitdiver ping

chadevans commented 5 years ago

try changing line 69 in pluginInit.js to this:

var envTestDiv = '<div id="envTest" style="margin-top:-99px;margin-top:constant(safe-area-inset-top);margin-top:env(safe-area-inset-top);position:absolute;z-index:-1;"></div>';

@wf9a5m75 tested and confirmed this works. In iOS 11.1, returns 0px instead of -99px with the addition of margin-top:constant(safe-area-inset-top); to the test, which is what we want. As a reminder, any value other than -99px in this test will add viewport-fit=cover to the viewport meta tag.

With this fix, iOS 11 early versions work.

wf9a5m75 commented 5 years ago

@chadevans Thank you for your work. @spacesuitdiver Please make sure @chadevans 's advise works for you

spacesuitdiver commented 5 years ago

@chadevans @wf9a5m75 testing this again right now in my actual project, I tried testing it yesterday but wasn't sure if it was working because the default cordova project doesn't actually go the edges of the screen.

wf9a5m75 commented 5 years ago

@spacesuitdiver You should share the project files on github if you ask to do something, at least reproducible project.

spacesuitdiver commented 5 years ago

@wf9a5m75 yep.

spacesuitdiver commented 5 years ago

@chadevans fix seems good over here, thanks!

wf9a5m75 commented 5 years ago

@chadevans Thank you for working a lot.

chadevans commented 5 years ago

My pleasure, thank you for the excellent plugin.

bradiosd commented 5 years ago

Hi all, this is actually happening across the board on iOS 12 too... I found this issue from the Ionic repo if anybody is having an issue of no clickable back buttons in the top area of the device. I believe the status bar is covering the header buttons in an Ionic app... https://github.com/ionic-team/ionic/issues/15960

Attached is a poorly drawn picture of mine when I was explaining it to a colleague.

Reverting to 2.4.4 or waiting for a new release is advisable.

img_20181023_164800

chadevans commented 5 years ago

@bb128b

Please try to reproduce using the multiple_maps branch.

mapsplugin / cordova-plugin-googlemaps

iOS 11.1 has white bar after map plugin upgrade to 2.4.6 #2459