Ionic 3: Fab button click not working on ios


#1

Here is a very weird issue that I am experiencing. Fab button click doesn’t do anything on ios app. It however works like a charm on android & pc-browser.

On tapping fab button on ios app, transition/blinking is clearly visible… but fab button list doesn’t appear.

Package.json Config

"dependencies": {
    "@angular/common": "4.0.0",
    "@angular/compiler": "4.0.0",
    "@angular/compiler-cli": "4.0.0",
    "@angular/core": "4.0.0",
    "@angular/forms": "4.0.0",
    "@angular/http": "4.0.0",
    "@angular/platform-browser": "4.0.0",
    "@angular/platform-browser-dynamic": "4.0.0",
    "@ionic-native/camera": "^3.5.0",
    "@ionic-native/contacts": "^3.10.3",
    "@ionic-native/core": "^3.6.1",
    "@ionic-native/dialogs": "^3.5.0",
    "@ionic-native/file": "^3.5.0",
    "@ionic-native/image-picker": "^3.5.0",
    "@ionic-native/in-app-browser": "3.9.2",
    "@ionic-native/media-capture": "^3.6.1",
    "@ionic-native/network": "3.4.4",
    "@ionic-native/social-sharing": "^3.10.3",
    "@ionic-native/splash-screen": "3.4.2",
    "@ionic-native/status-bar": "3.4.2",
    "@ionic/cloud-angular": "^0.12.0",
    "@ionic/storage": "2.0.1",
    "@ngx-translate/core": "6.0.1",
    "@ngx-translate/http-loader": "0.0.3",
    "angular2-moment": "1.3.3",
    "animate.css": "^3.5.2",
    "cordova-plugin-contacts": "^2.3.1",
    "cordova-plugin-x-socialsharing": "^5.1.8",
    "firebase": "3.7.8",
    "font-awesome": "^4.7.0",
    "ionic-angular": "3.0.1",
    "ionic2-auto-complete": "^1.5.0-beta",
    "ionicons": "3.0.0",
    "linqts": "1.8.1",
    "ng2-cordova-oauth": "0.0.8",
    "rxjs": "5.1.1",
    "sw-toolbox": "3.4.0",
    "zone.js": "0.8.5"
  },
  "devDependencies": {
    "@ionic/app-scripts": "^1.3.6",
    "@ionic/cli-plugin-cordova": "1.2.1",
    "@ionic/cli-plugin-ionic-angular": "1.2.0",
    "@types/jasmine": "^2.5.41",
    "@types/node": "^7.0.12",
    "angular2-template-loader": "^0.6.2",
    "html-loader": "^0.4.5",
    "jasmine": "^2.5.3",
    "karma": "^1.6.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-jasmine": "^1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-webpack": "^2.0.3",
    "null-loader": "^0.1.1",
    "ts-loader": "^2.0.3",
    "typescript": "2.2.2"
  },
  "cordovaPlugins": [
    "cordova-plugin-console",
    "cordova-plugin-whitelist",
    "cordova-plugin-statusbar",
    "cordova-plugin-device",
    "cordova-plugin-splashscreen",
    "ionic-plugin-keyboard",
    "cordova-plugin-inappbrowser"
  ],

Here is the fab button html

<ion-fab #fab>
 <button ion-fab mini no-padding icon-only clear>
   <ion-icon name="add"></ion-icon>
 </button>
  <ion-fab-list side="right">
    <button ion-fab (click)="insert('text', fab)">
      <ion-icon name="text"></ion-icon>
    </button>
    <button ion-fab (click)="insert('image', fab)">
      <ion-icon name="image"></ion-icon>
    </button>
    <button ion-fab (click)="insert('collection', fab)">
     <ion-icon name="albums"></ion-icon>
    </button>
   </ion-fab-list>
</ion-fab>

Please help!!!


#4

I also tried upgrading current Ionic version from 3.0.1 to 3.3.0, but the fab list button doesn’t work on app installed on ios [iPhone 5S, iOS 10.3.2].


#5

This issue is due to double ng-clicks firing on clicing ion-fab button. It got resolved by deferring second event click on iOS.


#6

Hi.

Can you help me with this, I am having the same problem and I can not figure out a way of making the event fire twice.

What have you done to fix it ?