Ionic Header Buttons Click Area Issue

lordsteggu commented 5 years ago

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

[ ] question
[x] any problem or bug report
[ ] feature request

If you choose 'problem or bug report', please select OS: (check one with "x")

[ ] Android
[x] iOS
[ ] Browser

cordova information: (run $> cordova plugin list)

com-sarriaroman-photoviewer 1.1.18 "PhotoViewer"
cordova-plugin-3dtouch 1.3.5 "3D Touch"
cordova-plugin-add-swift-support 1.7.1 "AddSwiftSupport"
cordova-plugin-camera 4.0.3 "Camera"
cordova-plugin-compat 1.2.0 "Compat"
cordova-plugin-console 1.1.0 "Console"
cordova-plugin-customurlscheme 4.3.0 "Custom URL scheme"
cordova-plugin-device 2.0.2 "Device"
cordova-plugin-dialogs 1.3.4 "Notification"
cordova-plugin-file 4.3.3 "File"
cordova-plugin-geolocation 4.0.1 "Geolocation"
cordova-plugin-googlemaps 2.4.6 "cordova-plugin-googlemaps"
cordova-plugin-inappbrowser 1.7.2 "InAppBrowser"
cordova-plugin-ionic-keyboard 2.1.3 "cordova-plugin-ionic-keyboard"
cordova-plugin-ionic-webview 2.3.1 "cordova-plugin-ionic-webview"
cordova-plugin-nativegeocoder 2.0.5 "NativeGeocoder"
cordova-plugin-network-information 2.0.1 "Network Information"
cordova-plugin-safariviewcontroller 1.5.4 "SafariViewController"
cordova-plugin-screen-orientation 2.0.2 "Screen Orientation"
cordova-plugin-secure-storage 2.6.8 "SecureStorage"
cordova-plugin-shortcuts-android 0.1.0 "Android Shortcuts"
cordova-plugin-splashscreen 5.0.2 "Splashscreen"
cordova-plugin-statusbar 2.4.2 "StatusBar"
cordova-plugin-whitelist 1.3.3 "Whitelist"
cordova-plugin-x-socialsharing 5.4.3 "SocialSharing"
cordova-sqlite-storage 2.5.2 "Cordova sqlite storage plugin"
cordova-wheel-selector-plugin 1.0.0 "Cordova Wheel Selector Plugin"
cordova.plugins.diagnostic 3.9.2 "Diagnostic"
es6-promise-plugin 4.2.2 "Promise"
info.protonet.imageresizer 0.1.1 "Image Resizer"
phonegap-plugin-barcodescanner 7.1.2 "BarcodeScanner"

If you use @ionic-native/google-maps, please tell the package.json (only @ionic-native/core and @ionic-native/google-maps are fine mostly) "@ionic-native/core": "^4.5.2", "@ionic-native/google-maps": "^4.5.3",

Just in case I also updated to the latest ionic native maps and core "@ionic-native/core": "^4.18.0", "@ionic-native/google-maps": "^4.15.1",

The more information I give you the easier it will be to get to the bottom of it.

Current behavior: When clicking on any buttons in the header bar you will notice they do not click correctly, you have to click slightly below or slightly above. This affects and ion button in the ion-navbar / ion-toolbar.

If I manually inspect and position them down the page, outside of the header itself, the buttons click perfectly as expected.

This issue only presents itself when I install the google maps plugin, and I believe it has only been since 2.4.5 onwards, which uses the new cocoapod setup.

I never noticed it before.

Expected behavior: Clicking buttons on the header bar should be affected no matter where abouts you press on them

Screen capture or video record: https://puu.sh/CjwT6/35fb36756d.mp4

You can see I am pressing the Menu button dead center, then I shift my finger down below it slightly, and then it activates the press. When the google maps plugin is not installed the button presses as expected.

This only occurs on ios, android doesn't seem to have any issues with the map plugin when deploying to device. Only ios deployed to device has issues. And it also only occurs when the google maps plugin is installed.

This is on ios 12 IPhone 6s & 7

Github Demo https://github.com/lordsteggu/HeaderDemo/tree/master


Easiest way to test it is to install the app on ios device with the google plugin and cocoapods install.
Check the menu button.
Uninstall google maps plugin 
Then check menu button again

wf9a5m75 commented 5 years ago

I tried to run your code, but your project contains old code and too much plugins. Please create new project that reproduce your issue, then share it on github repository.

lordsteggu commented 5 years ago

Hi, I can go through and remove the plugins. But they really shouldn't make a difference. Could you please explain the issue you are having with the project? It was a fresh ionic project, it has all the plugins i am using in case any of them are interfering with the Google maps plugin. Everything you need to test the project is in that repo I believe.

What do you mean by 'old code'?

wf9a5m75 commented 5 years ago

old code means old cordova library version.

lordsteggu commented 5 years ago

Do you mean iOS Cordova or android, the android one is in the package, but not actually relevant to the issue. Just install the latest iOS Cordova and try the app.

lordsteggu commented 5 years ago

Please explain in exact terms what is happening when you clone the repo to a Mac and perform an install on an iPhone.

If there are any issues with the app installing, or loading. This would be greatly appreciated and help me coordinate better with you.

Regards,

Daniel

lordsteggu commented 5 years ago

I am back at work now so will have a look at the project again and get back to you. I will reduce some of the plugins for you aswell.

int128fly commented 5 years ago

that issue look extremely similar to mine, I am currently trying to reproduce it with a new project also, just cordova-plugin-googlemaps doesn't seem to be enough, it's probably something in combination of this plugin that cause the issue. If your looking for a quick fix install the version 2.3.6 of cordova-plugin-googlemaps.

ionic cordova plugin add cordova-plugin-googlemaps@2.3.6 --variable API_KEY_FOR_ANDROID="..." --variable API_KEY_FOR_IOS="..."

wf9a5m75 commented 5 years ago

Then please stay on v2.3.6.

wf9a5m75 commented 5 years ago

@lordsteggu I really wonder what you wanted to me. In your code, there is no Google Maps. https://github.com/lordsteggu/HeaderDemo/blob/c70c22c34b4f3a3fb57437c4dc3de164cb1fb460/src/pages/home/home.ts

And I run it for just in case, but there is no problem at all. 147

Please prepare as much as possible. Otherwise you steal my private time from me.

lordsteggu commented 5 years ago

@wf9a5m75 I had it reproducing with just the plugin installed. I will go and check the deployment again to make sure I can still reproduce it on that repo and get back to you with any extra info.

I am glad to see you were able to install it to a device even though there was so much old code.

wf9a5m75 commented 5 years ago

Ping

lordsteggu commented 5 years ago

I have been trying to reproduce it, but have so far been unable to do so. @int128fly did you have any luck?

I removed my projects node modules and completely reinstalled all packages and plugins, there were a few packages that needed adding extra, the only differences between my old packages / plugins and the new one were as follows.

I installed cordova ios 4.5.4 instead of 4.5.5

"acorn": "^6.0.5",
"ajv": "^6.6.2",
"cordova-plugin-shortcuts-android": "^0.1.1",
"cordova-plugin-x-socialsharing": "^5.4.3",
"cordova-sqlite-storage": "^2.6.0",

those were the only changes from my non working project to the working project in my packages.json

the cordova packages were all the same version in the config.xml, those were the only changes that I am aware occurred in the process.

I installed all the packages with nodejs version 8.4.0 npm version 5.3.0

Then went through the normal ionic cordova install, and performed the pod install on the platform. Deployed the app to my iphone7 and the header buttons seem to be working as expected.

So, I am unsure as to the reason, but as far as I could see, those packages and configs are the only things that changed.

wf9a5m75 commented 5 years ago

ping

ggiordan commented 5 years ago

I've spend the better part of the day on this, so glad I found this post. I am having what seems to be the same issue. I'm using cordova w/JQM.

At the top of my app, I have a button in the header with some other navigation buttons below. There seems to be a full width rectangular "dead spot" just below the text on the upper button that extends down to just above the text on the navigation buttons (see attached screenshot from the simulator). Depending on the device this dead spot seems to move around a bit.

I have both this plugin and the statusbar plugin installed. If I remove one or the other, the problem goes away. I suspect that 'dead box' is always there, its just that the statusbar plugin is causing it to move around and get in the way.

I did try @int128fly 's work around of using an older version of the plugin, that does seem to resolve the issue for now... (OMG, thank you!!) but I think staying back level on this is going to make me sad in the longer term.

int128fly commented 5 years ago

@ggjordan I have to agree using an older version is not the greatest thing and I am really happy that you seem to have found the issue, hopefully they can find a solution.

wf9a5m75 commented 5 years ago

Please try https://github.com/mapsplugin/cordova-plugin-googlemaps/tree/67c5619cad17f9b40d9826cf95ee26b81a239535

wf9a5m75 commented 5 years ago

Please reinstall

cordova-plugin-googlemaps v2.5.1
@ionic-native/google-maps v5.0.0-beta.27

ggiordan commented 5 years ago

I was able to try 2.5.1, it's better but there is still a 'dead spot'. It does seem to be smaller. Using an iPhone-X it now only spans from the top of the navigation buttons to the top of the text on the navigation buttons. Still full width.

I could not use the git link, when I tried to do the package add, it complained about missing a package.json file... not sure what to make of that.... I'm sure I'm not doing something right...

Hope this feedback helps.

Jeff

wf9a5m75 commented 5 years ago

Please try v2.5.2

QiaoyuanMaxDeng commented 5 years ago

Thank you all. We just upgrade our dependencies recently and blocked by this. After research, found out 2.5.2 has fixed this issue. You guys are amazing!

MVnComputers commented 5 years ago

Hi, is there any progress? On Iphone Xr it works (Buttons in header). But it doesn't work on Iphone 8. TY


"dependencies": {
    "@angular/common": "^8.2.2",
    "@angular/compiler-cli": "^8.2.2",
    "@angular/core": "^8.2.2",
    "@angular/forms": "^8.2.2",
    "@angular/http": "^7.2.15",
    "@angular/platform-browser": "^8.2.2",
    "@angular/platform-browser-dynamic": "^8.2.2",
    "@angular/router": "^8.2.2",
    "@ionic-native/admob-pro": "^5.12.0",
    "@ionic-native/base64": "^5.12.0",
    "@ionic-native/camera": "^5.12.0",
    "@ionic-native/core": "^5.12.0",
    "@ionic-native/google-maps": "^5.5.0",
    "@ionic-native/image-picker": "^5.12.0",
    "@ionic-native/ionic-webview": "^5.12.0",
    "@ionic-native/network": "^5.12.0",
    "@ionic-native/splash-screen": "^5.12.0",
    "@ionic-native/status-bar": "^5.12.0",
    "@ionic/angular": "^4.7.4",
    "@ionic/storage": "^2.2.0",
    "@ngx-translate/core": "^11.0.1",
    "@ngx-translate/http-loader": "^4.0.0",
    "ajv": "^6.10.2",
    "com-badrit-base64": "0.2.0",
    "cordova-admobsdk": "^7.37.0",
    "cordova-android": "^8.0.0",
    "cordova-browser": "^6.0.0",
    "cordova-ios": "^5.0.1",
    "cordova-plugin-admobpro": "2.37.2",
    "cordova-plugin-camera": "4.0.3",
    "cordova-plugin-device": "^2.0.3",
    "cordova-plugin-extension": "1.5.4",
    "cordova-plugin-googlemaps": "git+https://github.com/mapsplugin/cordova-plugin-googlemaps.git#multiple_maps",
    "cordova-plugin-ionic-keyboard": "^2.1.3",
    "cordova-plugin-ionic-webview": "^4.1.1",
    "cordova-plugin-network-information": "2.0.2",
    "cordova-plugin-splashscreen": "^5.0.3",
    "cordova-plugin-statusbar": "^2.4.3",
    "cordova-plugin-telerik-imagepicker": "^2.3.3",
    "cordova-plugin-whitelist": "^1.3.4",
    "core-js": "^2.6.9",
    "lodash": "^4.17.15",
    "normalize-diacritics": "^1.0.2",
    "rxjs": "^6.5.2",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/architect": "^0.802.2",
    "@angular-devkit/build-angular": "^0.802.2",
    "@angular-devkit/core": "^8.2.2",
    "@angular-devkit/schematics": "^8.2.2",
    "@angular/cli": "8.2.1",
    "@angular/compiler": "^8.2.2",
    "@angular/language-service": "^8.2.2",
    "@ionic/angular-toolkit": "^2.0.0",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^10.14.15",
    "codelyzer": "^5.1.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "^4.2.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "^2.1.0",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "^8.3.0",
    "tslint": "~5.12.0",
    "typescript": "~3.5.3"
  },
  "description": "An Ionic project",
  "cordova": {
    "plugins": {
      "cordova-plugin-whitelist": {},
      "cordova-plugin-statusbar": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-ionic-keyboard": {},
      "cordova-plugin-camera": {},
      "cordova-plugin-telerik-imagepicker": {
        "PHOTO_LIBRARY_USAGE_DESCRIPTION": " "
      },
      "com-badrit-base64": {},
      "cordova-plugin-admobpro": {
        "PLAY_SERVICES_VERSION": "16.0.0"
      },
      "cordova-plugin-network-information": {},
      "cordova-plugin-ionic-webview": {
        "ANDROID_SUPPORT_ANNOTATIONS_VERSION": "27.+"
      },
      "cordova-plugin-googlemaps": {}
    },
    "platforms": [
      "browser",
      "ios",
      "android"
    ]
  }```

ionic-team / ionic-native-google-maps

Ionic Header Buttons Click Area Issue #147