Cordova app unable to click the elements exactly location

Issue

I tested my Cordova-based app on the iPhone 11 Pro Max simulator. everything look good as a design. But I realized that I cannot click on the elements I want to click. I have to click about 20 pixels above what I want to click. This is for every element on page.

For example, I have to click on the yellow circle to open the tab shown with the red circle in the screenshot below.

enter image description here

My index.html

<meta name"viewport" content"user-scalableno, initial-scale1, maximum-scale1, minimum-scale1, widthdevice-width">

**If I add viewport-fitcover, clicks are ok, but this time there is a large (really big) area below tabbar. exactly like this:Problem screen ionic app on iPhone 11 Pro Max

config.xml

<?xml version'1.0' encoding'utf-8'?>
<widget id“xx” version"0.0.7" xmlns"http://www.w3.org/ns/widgets" xmlns:android"http://schemas.android.com/apk/res/android" xmlns:cdv"http://cordova.apache.org/ns/1.0">
    <content src"index.html" />
    <access origin"*" />
    <allow-navigation href"*" />
    <allow-intent href"http://*/*" />
    <allow-intent href"https://*/*" />
    <allow-intent href"tel:*" />
    <allow-intent href"sms:*" />
    <allow-intent href"mailto:*" />
    <allow-intent href"geo:*" />
    <preference name"ScrollEnabled" value"false" />
    <preference name"BackupWebStorage" value"none" />
    <preference name"SplashMaintainAspectRatio" value"true" />
    <preference name"FadeSplashScreenDuration" value"300" />
    <preference name"SplashShowOnlyFirstTime" value"false" />
    <preference name"SplashScreen" value"screen" />
    <preference name"SplashScreenDelay" value"3000" />
    <preference name"orientation" value"portrait" />
    <preference name"android-targetSdkVersion" value"29" />
    <preference name"scheme" value"app" />
    <preference name"hostname" value"localhost" />
    <preference name"WKWebViewOnly" value"true" />

    <platform name"ios">
        <allow-intent href"itms:*" />
        <allow-intent href"itms-apps:*" />
        <icon height"57" src"resources/ios/icon/icon.png" width"57" />
        <icon height"114" src"resources/ios/icon/icon@2x.png" width"114" />
        <icon height"29" src"resources/ios/icon/icon-small.png" width"29" />
        <icon height"58" src"resources/ios/icon/icon-small@2x.png" width"58" />
        <icon height"87" src"resources/ios/icon/icon-small@3x.png" width"87" />
        <icon height"20" src"resources/ios/icon/icon-20.png" width"20" />
        <icon height"40" src"resources/ios/icon/icon-20@2x.png" width"40" />
        <icon height"60" src"resources/ios/icon/icon-20@3x.png" width"60" />
        <icon height"48" src"resources/ios/icon/icon-24@2x.png" width"48" />
        <icon height"55" src"resources/ios/icon/icon-27.5@2x.png" width"55" />
        <icon height"29" src"resources/ios/icon/icon-29.png" width"29" />
        <icon height"58" src"resources/ios/icon/icon-29@2x.png" width"58" />
        <icon height"87" src"resources/ios/icon/icon-29@3x.png" width"87" />
        <icon height"40" src"resources/ios/icon/icon-40.png" width"40" />
        <icon height"80" src"resources/ios/icon/icon-40@2x.png" width"80" />
        <icon height"120" src"resources/ios/icon/icon-40@3x.png" width"120" />
        <icon height"88" src"resources/ios/icon/icon-44@2x.png" width"88" />
        <icon height"50" src"resources/ios/icon/icon-50.png" width"50" />
        <icon height"100" src"resources/ios/icon/icon-50@2x.png" width"100" />
        <icon height"60" src"resources/ios/icon/icon-60.png" width"60" />
        <icon height"120" src"resources/ios/icon/icon-60@2x.png" width"120" />
        <icon height"180" src"resources/ios/icon/icon-60@3x.png" width"180" />
        <icon height"72" src"resources/ios/icon/icon-72.png" width"72" />
        <icon height"144" src"resources/ios/icon/icon-72@2x.png" width"144" />
        <icon height"76" src"resources/ios/icon/icon-76.png" width"76" />
        <icon height"152" src"resources/ios/icon/icon-76@2x.png" width"152" />
        <icon height"167" src"resources/ios/icon/icon-83.5@2x.png" width"167" />
        <icon height"172" src"resources/ios/icon/icon-86@2x.png" width"172" />
        <icon height"196" src"resources/ios/icon/icon-98@2x.png" width"196" />
        <icon height"1024" src"resources/ios/icon/icon-1024.png" width"1024" />
        <splash height"480" src"resources/ios/splash/Default~iphone.png" width"320" />
        <splash height"960" src"resources/ios/splash/Default@2x~iphone.png" width"640" />
        <splash height"1024" src"resources/ios/splash/Default-Portrait~ipad.png" width"768" />
        <splash height"768" src"resources/ios/splash/Default-Landscape~ipad.png" width"1024" />
        <splash height"1125" src"resources/ios/splash/Default-Landscape-2436h.png" width"2436" />
        <splash height"1242" src"resources/ios/splash/Default-Landscape-736h.png" width"2208" />
        <splash height"2048" src"resources/ios/splash/Default-Portrait@2x~ipad.png" width"1536" />
        <splash height"1536" src"resources/ios/splash/Default-Landscape@2x~ipad.png" width"2048" />
        <splash height"2732" src"resources/ios/splash/Default-Portrait@~ipadpro.png" width"2048" />
        <splash height"2048" src"resources/ios/splash/Default-Landscape@~ipadpro.png" width"2732" />
        <splash height"1136" src"resources/ios/splash/Default-568h@2x~iphone.png" width"640" />
        <splash height"1334" src"resources/ios/splash/Default-667h.png" width"750" />
        <splash height"2208" src"resources/ios/splash/Default-736h.png" width"1242" />
        <splash height"2436" src"resources/ios/splash/Default-2436h.png" width"1125" />
        <splash height"2732" src"resources/ios/splash/Default@2x~universal~anyany.png" width"2732" />
        <icon height"57" src"resources/ios/icon/icon.png" width"57" />
        <icon height"114" src"resources/ios/icon/icon@2x.png" width"114" />
        <icon height"20" src"resources/ios/icon/icon-20.png" width"20" />
        <icon height"40" src"resources/ios/icon/icon-20@2x.png" width"40" />
        <icon height"60" src"resources/ios/icon/icon-20@3x.png" width"60" />
        <icon height"29" src"resources/ios/icon/icon-29.png" width"29" />
        <icon height"58" src"resources/ios/icon/icon-29@2x.png" width"58" />
        <icon height"87" src"resources/ios/icon/icon-29@3x.png" width"87" />
        <icon height"48" src"resources/ios/icon/icon-24@2x.png" width"48" />
        <icon height"55" src"resources/ios/icon/icon-27.5@2x.png" width"55" />
        <icon height"88" src"resources/ios/icon/icon-44@2x.png" width"88" />
        <icon height"172" src"resources/ios/icon/icon-86@2x.png" width"172" />
        <icon height"196" src"resources/ios/icon/icon-98@2x.png" width"196" />
        <icon height"216" src"resources/ios/icon/icon-108@2x.png" width"216" />
        <icon height"40" src"resources/ios/icon/icon-40.png" width"40" />
        <icon height"80" src"resources/ios/icon/icon-40@2x.png" width"80" />
        <icon height"120" src"resources/ios/icon/icon-40@3x.png" width"120" />
        <icon height"50" src"resources/ios/icon/icon-50.png" width"50" />
        <icon height"100" src"resources/ios/icon/icon-50@2x.png" width"100" />
        <icon height"60" src"resources/ios/icon/icon-60.png" width"60" />
        <icon height"120" src"resources/ios/icon/icon-60@2x.png" width"120" />
        <icon height"180" src"resources/ios/icon/icon-60@3x.png" width"180" />
        <icon height"72" src"resources/ios/icon/icon-72.png" width"72" />
        <icon height"144" src"resources/ios/icon/icon-72@2x.png" width"144" />
        <icon height"76" src"resources/ios/icon/icon-76.png" width"76" />
        <icon height"152" src"resources/ios/icon/icon-76@2x.png" width"152" />
        <icon height"167" src"resources/ios/icon/icon-83.5@2x.png" width"167" />
        <icon height"1024" src"resources/ios/icon/icon-1024.png" width"1024" />
        <splash height"1136" src"resources/ios/splash/Default-568h@2x~iphone.png" width"640" />
        <splash height"1334" src"resources/ios/splash/Default-667h.png" width"750" />
        <splash height"2688" src"resources/ios/splash/Default-2688h~iphone.png" width"1242" />
        <splash height"1792" src"resources/ios/splash/Default-1792h~iphone.png" width"828" />
        <splash height"2436" src"resources/ios/splash/Default-2436h.png" width"1125" />
        <splash height"2208" src"resources/ios/splash/Default-736h.png" width"1242" />
        <splash height"2048" src"resources/ios/splash/Default-Portrait@2x~ipad.png" width"1536" />
        <splash height"2732" src"resources/ios/splash/Default-Portrait@~ipadpro.png" width"2048" />
        <splash height"1024" src"resources/ios/splash/Default-Portrait~ipad.png" width"768" />
        <splash height"960" src"resources/ios/splash/Default@2x~iphone.png" width"640" />
        <splash height"480" src"resources/ios/splash/Default~iphone.png" width"320" />
        <splash height"2732" src"resources/ios/splash/Default@2x~universal~anyany.png" width"2732" />
        <icon height"57" src"resources/ios/icon/icon.png" width"57" />
        <icon height"114" src"resources/ios/icon/icon@2x.png" width"114" />
        <icon height"20" src"resources/ios/icon/icon-20.png" width"20" />
        <icon height"40" src"resources/ios/icon/icon-20@2x.png" width"40" />
        <icon height"60" src"resources/ios/icon/icon-20@3x.png" width"60" />
        <icon height"29" src"resources/ios/icon/icon-29.png" width"29" />
        <icon height"58" src"resources/ios/icon/icon-29@2x.png" width"58" />
        <icon height"87" src"resources/ios/icon/icon-29@3x.png" width"87" />
        <icon height"48" src"resources/ios/icon/icon-24@2x.png" width"48" />
        <icon height"55" src"resources/ios/icon/icon-27.5@2x.png" width"55" />
        <icon height"88" src"resources/ios/icon/icon-44@2x.png" width"88" />
        <icon height"172" src"resources/ios/icon/icon-86@2x.png" width"172" />
        <icon height"196" src"resources/ios/icon/icon-98@2x.png" width"196" />
        <icon height"216" src"resources/ios/icon/icon-108@2x.png" width"216" />
        <icon height"40" src"resources/ios/icon/icon-40.png" width"40" />
        <icon height"80" src"resources/ios/icon/icon-40@2x.png" width"80" />
        <icon height"120" src"resources/ios/icon/icon-40@3x.png" width"120" />
        <icon height"50" src"resources/ios/icon/icon-50.png" width"50" />
        <icon height"100" src"resources/ios/icon/icon-50@2x.png" width"100" />
        <icon height"60" src"resources/ios/icon/icon-60.png" width"60" />
        <icon height"120" src"resources/ios/icon/icon-60@2x.png" width"120" />
        <icon height"180" src"resources/ios/icon/icon-60@3x.png" width"180" />
        <icon height"72" src"resources/ios/icon/icon-72.png" width"72" />
        <icon height"144" src"resources/ios/icon/icon-72@2x.png" width"144" />
        <icon height"76" src"resources/ios/icon/icon-76.png" width"76" />
        <icon height"152" src"resources/ios/icon/icon-76@2x.png" width"152" />
        <icon height"167" src"resources/ios/icon/icon-83.5@2x.png" width"167" />
        <icon height"1024" src"resources/ios/icon/icon-1024.png" width"1024" />
        <splash height"1136" src"resources/ios/splash/Default-568h@2x~iphone.png" width"640" />
        <splash height"1334" src"resources/ios/splash/Default-667h.png" width"750" />
        <splash height"2688" src"resources/ios/splash/Default-2688h~iphone.png" width"1242" />
        <splash height"1242" src"resources/ios/splash/Default-Landscape-2688h~iphone.png" width"2688" />
        <splash height"1792" src"resources/ios/splash/Default-1792h~iphone.png" width"828" />
        <splash height"828" src"resources/ios/splash/Default-Landscape-1792h~iphone.png" width"1792" />
        <splash height"2436" src"resources/ios/splash/Default-2436h.png" width"1125" />
        <splash height"1125" src"resources/ios/splash/Default-Landscape-2436h.png" width"2436" />
        <splash height"2208" src"resources/ios/splash/Default-736h.png" width"1242" />
        <splash height"1242" src"resources/ios/splash/Default-Landscape-736h.png" width"2208" />
        <splash height"1536" src"resources/ios/splash/Default-Landscape@2x~ipad.png" width"2048" />
        <splash height"2048" src"resources/ios/splash/Default-Landscape@~ipadpro.png" width"2732" />
        <splash height"768" src"resources/ios/splash/Default-Landscape~ipad.png" width"1024" />
        <splash height"2048" src"resources/ios/splash/Default-Portrait@2x~ipad.png" width"1536" />
        <splash height"2732" src"resources/ios/splash/Default-Portrait@~ipadpro.png" width"2048" />
        <splash height"1024" src"resources/ios/splash/Default-Portrait~ipad.png" width"768" />
        <splash height"960" src"resources/ios/splash/Default@2x~iphone.png" width"640" />
        <splash height"480" src"resources/ios/splash/Default~iphone.png" width"320" />
        <splash height"2732" src"resources/ios/splash/Default@2x~universal~anyany.png" width"2732" />
        <splash src"resources/ios/splash/Default@3x~universal~anyany.png" />
        <splash src"resources/ios/splash/Default@3x~iphone.png" />
        <splash height"2436" src"resources/ios/splash/Default-812h@3x.png" width"1125" />
        <splash src"resources/ios/splash/Default@2x~iphone~anyany.png" />
        <splash src"resources/ios/splash/Default@2x~iphone~comany.png" />
        <splash src"resources/ios/splash/Default@2x~iphone~comcom.png" />
        <splash src"resources/ios/splash/Default@3x~iphone~anyany.png" />
        <splash src"resources/ios/splash/Default@3x~iphone~anycom.png" />
        <splash src"resources/ios/splash/Default@3x~iphone~comany.png" />
        <splash src"resources/ios/splash/Default@2x~ipad~anyany.png" />
        <splash src"resources/ios/splash/Default@2x~ipad~comany.png" />
    </platform>
    <plugin name"cordova-plugin-whitelist" spec"^1.3.3" />
    <plugin name"cordova-plugin-ionic-keyboard" spec"^2.2.0" />
    <plugin name"cordova-sqlite-storage" spec"^5.1.0" />
    <plugin name"cordova-plugin-device" spec"^2.0.3" />
    <plugin name"cordova-plugin-app-version" spec"^0.1.9" />
    <plugin name"cordova-clipboard" spec"^1.3.0" />
    <plugin name"onesignal-cordova-plugin" spec"^2.11.2" />
    <plugin name"cordova-plugin-statusbar" spec"https://github.com/apache/cordova-plugin-statusbar.git" />
    <plugin name"cordova-plugin-splashscreen" spec"^6.0.0" />
    <plugin name"cordova-plugin-ionic-webview" spec"^4.2.1">
        <variable name"ANDROID_SUPPORT_ANNOTATIONS_VERSION" value"27.+" />
    </plugin>
    <engine name"android" spec"7.0.0" />
    <engine name"ios" spec"^6.1.1" />
</widget>

System:

Ionic:

   Ionic CLI          : 5.4.16 (/usr/local/lib/node_modules/ionic)
   Ionic Framework    : ionic-angular 3.9.9
   @ionic/app-scripts : 3.2.4

Cordova:

   Cordova CLI       : 8.1.2 (cordova-lib@8.1.1)
   Cordova Platforms : ios 6.1.1
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.2.1, (and 8 other plugins)

Utility:

   cordova-res (update available: 0.15.2) : 0.8.1
   native-run                             : not installed

System:

   ios-deploy : 1.10.0
   ios-sim    : 8.0.2
   NodeJS     : v12.13.0 (/usr/local/bin/node)
   npm        : 6.12.0
   OS         : macOS Big Sur
   Xcode      : Xcode 12.3 Build version 12C33

Thanks.

Solution

Finally i solved.

-I updated the cordova-plugin-ionic-webview to version 5.0.0.

-I installed @ionic-native/ionic-webview(versiyon 5.30.0)

Then i added “viewport-fitcover” to index.html

<meta name"viewport" content"viewport-fitcover user-scalableno, initial-scale1, maximum-scale1, minimum-scale1, widthdevice-width">

finally, i added following css to app.scss

body{
  margin: 0;
  margin-top: env(safe-area-inset-top);
  background: linear-gradient(285deg, #329d65 0%, #019f56 37%, #067247 100%) !important; //without this, status bar background will be white. 
}

Now, everything works perfect. i hope it helped someone.

Answered By – Veysel

Leave a Comment