Cordova-plugin-googlemaps: The key "viewport-fit" is not recognized and ignored. ionic v3 and google maps v2

[wuilmerj24]

I'm submitting a ... (check one with "x")
[ ] question
[X] any problem or bug report
[ ] feature request

plugin version: (check one with "x")
[ ] 1.4.x
[X ] 2.0.0-beta2

cordova information: (run $> cordova plugin list)

cordova-plugin-app-event 1.2.0 "Application Events"
cordova-plugin-camera 2.4.1 "Camera"
cordova-plugin-camera-preview 0.9.0 "cordova-plugin-camera-preview"
cordova-plugin-compat 1.1.0 "Compat"
cordova-plugin-console 1.0.5 "Console"
cordova-plugin-device 1.1.4 "Device"
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.7 "Globalization"
cordova-plugin-googlemaps 2.0.0-beta3-20170811-1937 "cordova-plugin-googlemaps"
cordova-plugin-nativegeocoder 2.0.2 "NativeGeocoder"
cordova-plugin-network-information 1.3.3 "Network Information"
cordova-plugin-splashscreen 4.0.3 "Splashscreen"
cordova-plugin-statusbar 2.2.2 "StatusBar"
cordova-plugin-whitelist 1.3.1 "Whitelist"
cordova-plugin-x-toast 2.6.0 "Toast"
cordova-sqlite-storage 2.0.4 "Cordova sqlite storage plugin"
de.appplant.cordova.plugin.local-notification 0.8.5 "LocalNotification"
ionic-plugin-keyboard 2.2.1 "Keyboard"

Current behavior:

Expected behavior:

The key "viewport-fit" is not recognized and ignored.

Steps to reproduce:

Screen capture or video record:

Related code, data or error log (please format your code or data):

insert any relevant code, data, or error log here

---

If your problem is solved, please consider small amount donation to this project.
Appreciate for your kindness.
https://github.com/mapsplugin/cordova-plugin-googlemaps-doc/blob/master/README.md#buy-me-a-beer

[wf9a5m75]

Thank you for sending pull request. I will wait it.

[amjadyahya]

Same here

[wf9a5m75]

@longzheng You need to fix this. Because your pull request.

[longzheng]

Sorry I don’t follow. The fix is working for me well in iOS 11?

The viewport-fit rule is defined here https://drafts.csswg.org/css-round-display/#viewport-fit-descriptor

[wf9a5m75]

The problem occurs on iOS10, because the iOS10 is not able to recognize the viewport-fit attribute.
Unfortunately, I have no environment for iOS11 yet.
So detecting iOS11 with user agent is fine way.

[longzheng]

iOS 10 and below should ignore the viewport-fit attribute and it shouldn’t have any effect?

[wf9a5m75]

Actually no affect, except the error message in console.log.

[wf9a5m75]

[longzheng]

Ah ok. I’ll make a fix for it in the next 24 hours!

[longzheng]

PR ready, awaiting review

[wf9a5m75]

Looks good:) Thanks!

[longzheng]

I do want to ask why this bit of viewport code exists in this plugin? In theory the viewport should be determined by the app, and overriding it like this feels a bit conflicting.

[wf9a5m75]

This plugin has to the position, size and z-index of all html elements in native side.
But the plugin can not calculate if the viewport is not fit with the device size(such as zoom).
That's why this plugin has to fix with the viewport.

If you have improvement, pleased send another pull request please.

[longzheng]

I think most Cordova/Ionic apps should have the viewport set like this already so I'm not sure if an override is necessary at all.

If it is in fact necessary, an alternate approach I can think of is read (and overwrite) the values, instead of the whole string so it is not as destructive.

[wf9a5m75]

You think most Cordova/Ionic, but not 100%.
This plugin needs 100%.

100% means not only ionic, but also DrupalGap, or other cordova extended frameworks, and even pure HTML.