Enforcing the same webview for all android APIs

Ionic Framework
1

Hello guys,

It’s been 2 days of me trying to figure out if there’s a way to enforce the same webview for all android APIs out there, or at least for the ones > 20.

I tried crosswalk but that didn’t work well and is no longer maintained, which already raises a flag.

Environment:

$ ionic cordova plugin list

cordova plugin ls
cordova-plugin-device 2.0.3 “Device”
cordova-plugin-ionic-keyboard 2.2.0 “cordova-plugin-ionic-keyboard”
cordova-plugin-ionic-webview 4.2.1 “cordova-plugin-ionic-webview”
cordova-plugin-nativeaudio 3.0.9 “Cordova Native Audio”
cordova-plugin-splashscreen 5.0.4 “Splashscreen”
cordova-plugin-statusbar 2.4.3 “StatusBar”
cordova-plugin-whitelist 1.3.4 “Whitelist”

$ ionic info

Ionic:

Ionic CLI : 6.11.1 (/usr/local/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 5.6.7
@angular-devkit/build-angular : 0.1102.13
@angular-devkit/schematics : 11.2.13
@angular/cli : 11.2.13
@ionic/angular-toolkit : 3.1.1

Capacitor:

Capacitor CLI : 2.4.7
@capacitor/core : 2.4.7

Cordova:

Cordova CLI : 9.0.0 (cordova-lib@9.0.1)
Cordova Platforms : android 8.1.0, browser 6.0.0
Cordova Plugins : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.2.1, (and 5 other plugins)

Utility:

cordova-res (update available: 0.15.3) : 0.15.1
native-run (update available: 1.3.0) : 1.0.0

System:

NodeJS : v12.13.0 (/usr/local/bin/node)
npm : 6.12.0
OS : macOS Catalina
Xcode : Xcode 11.3.1 Build version 11C505

The main issue I’m trying to resolve is this:

On a browser and on a real device (android 11), the app looks the same.
However, on android 7 (pie) and android 8 (oreo), the app’s CSS and HTML5 canvas look all messed up.

I thought that using negative margins and %s was supported for nearly all modern browsers but that’s not entirely true, it seems.

This brings me to the main question… Is there a way to enforce the same webView (or the same Chrome version) across all APIs, so the whole IONIC idea makes sense?

Thank you!

P.S - the ultimate solution would be to limit my app for just new devices but that’d be irrational.

Update: just tested what browser was used by Android 8 Oreo → Chrome 4.
On a real device (running android 11), the result is also Chrome 4.

2

Update: I fixed my issue by completely rewriting the CSS part.
Instead of using negative margins and stuff, I used absolute positioning and that worked out pretty well.

When all’s by the book, it works perfectly fine.

Thank you!