Ionic 3 - iOS 13.4 & above - Tap event container offset for Angular Drop Animation

[megatcorleone]

🐞 bug report

Affected Package

The issue is caused by package @angular/core

Is this a regression?

Before iOS 13.4, the animation working fine.

Description

I have issue when tap (click) on element when the element(packet) having drop animation from top to bottom. I found the issue is the clickarea for each element(packet) is slightly on the top of element(packet). I tried applying a lot of changes but still stuck for this issue.

🔥 Exception or Error

animations: [
    trigger('drop', [
      state('initial', style({
        transform: 'translate3d(0, -100vh, 0) rotate(-20deg)'
      })),
      state('down', style({
        transform: 'translate3d(0, 150vh, 0) rotate(-20deg)'
      })),
      transition('initial <=> down', [
        animate('4s ease-in')
      ])
    ]),
    trigger('dropFaster', [
      state('initial', style({
        transform: 'translate3d(0, -100vh, 0) rotate(20deg)'
      })),
      state('down', style({
        transform: 'translate3d(0, 150vh, 0) rotate(20deg)'
      })),
      transition('initial <=> down', [
        animate('3.5s ease-in')
      ])
    ])
  ]

<div tappable class="packet-container" [@dropFaster]="packet.animation" (tap)="openPacket(packet, 'faster', i)" *ngFor="let packet of randomizedFasterPacket; let i = index" [style.left.%]="packet.left">
        <img tappable [src]="packet.img" *ngIf="!packet.click" (tap)="openPacket(packet, 'faster', i)"/>
        <div *ngIf="packet.click" class="open-success-faster"><span>+1</span></div>
    </div>
    
 <div tappable class="packet-container" [@drop]="packet.animation"  (tap)="openPacket(packet, 'normal', i)" *ngFor="let packet of randomizedPacket; let i = index" [style.left.%]="packet.left">
        <img tappable [src]="packet.img" *ngIf="!packet.click" (tap)="openPacket(packet, 'normal', i)"/>
     <div *ngIf="packet.click" class="open-success"><span>+1</span></div>
 </div>

🌍 Your Environment

Angular Version:

Angular CLI: 8.3.0
Node: 10.11.0
OS: darwin x64
Angular: 5.1.3
... animations, common, compiler, compiler-cli, core, forms
... http, platform-browser, platform-browser-dynamic

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.803.0 (cli-only)
@angular-devkit/build-optimizer   0.0.35
@angular-devkit/core              8.3.0 (cli-only)
@angular-devkit/schematics        8.3.0 (cli-only)
@schematics/angular               8.3.0 (cli-only)
@schematics/update                0.803.0 (cli-only)
rxjs                              5.5.2
typescript                        2.4.2
webpack                           3.8.1

Ionic:

   ionic (Ionic CLI)  : 4.1.2 (/Users/ahmadsalehudin/.nvm/versions/node/v10.11.0/lib/node_modules/ionic)
   Ionic Framework    : ionic-angular 3.9.2
   @ionic/app-scripts : 3.1.6

Cordova:

   cordova (Cordova CLI) : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms     : ios 5.0.0
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 1.2.1, (and 43 other plugins)

System:

   Android SDK Tools : 26.1.1 (/Users/ahmadsalehudin/Library/Android/sdk)
   ios-sim           : 7.0.0
   NodeJS            : v10.11.0 (/Users/ahmadsalehudin/.nvm/versions/node/v10.11.0/bin/node)
   npm               : 6.4.1
   OS                : macOS
   Xcode             : Xcode 11.5 Build version 11E608c

Package.json Snippet

"dependencies": {
    "@angular/animations": "5.1.3",
    "@angular/common": "5.1.3",
    "@angular/compiler": "5.1.3",
    "@angular/compiler-cli": "5.1.3",
    "@angular/core": "5.1.3",
    "@angular/forms": "5.1.3",
    "@angular/http": "5.1.3",
    "@angular/platform-browser": "5.1.3",
    "@angular/platform-browser-dynamic": "5.1.3",
    "@ionic-native/app-rate": "4.7.0",
    "@ionic-native/app-version": "4.7.0",
    "@ionic-native/barcode-scanner": "4.7.0",
    "@ionic-native/call-number": "4.7.0",
    "@ionic-native/camera": "4.7.0",
    "@ionic-native/clipboard": "4.7.0",
    "@ionic-native/contacts": "4.7.0",
    "@ionic-native/core": "4.7.0",
    "@ionic-native/crop": "4.7.0",
    "@ionic-native/device": "4.7.0",
    "@ionic-native/diagnostic": "4.7.0",
    "@ionic-native/dialogs": "4.7.0",
    "@ionic-native/file": "4.7.0",
    "@ionic-native/fingerprint-aio": "4.7.0",
    "@ionic-native/firebase-analytics": "4.7.0",
    "@ionic-native/geolocation": "4.7.0",
    "@ionic-native/google-maps": "4.7.0",
    "@ionic-native/http": "4.7.0",
    "@ionic-native/keyboard": "4.7.0",
    "@ionic-native/network-interface": "4.5.0",
    "@ionic-native/open-native-settings": "4.7.0",
    "@ionic-native/push": "4.7.0",
    "@ionic-native/secure-storage": "4.7.0",
    "@ionic-native/shake": "4.7.0",
    "@ionic-native/social-sharing": "4.7.0",
    "@ionic-native/splash-screen": "4.7.0",
    "@ionic-native/status-bar": "4.7.0",
    "@ionic-native/themeable-browser": "4.7.0",
    "@ionic-native/vibration": "4.7.0",
    "@ionic/storage": "2.1.3",
    "@ngrx/core": "1.2.0",
    "@ngrx/effects": "4.1.1",
    "@ngrx/store": "4.1.1",
    "@ngrx/store-devtools": "4.1.1",
    "@ngx-translate/core": "9.0.1",
    "@ngx-translate/http-loader": "2.0.1",
    "cordova": "9.0.0",
    "cordova-android": "8.1.0",
    "cordova-android-firebase-gradle-release": "4.0.0",
    "cordova-android-play-services-gradle-release": "4.0.0",
    "cordova-clipboard": "1.2.1",
    "cordova-custom-config": "5.1.0",
    "cordova-ios": "^5.0.0",
    "cordova-open-native-settings": "1.5.2",
    "cordova-plugin-advanced-http": "file:local_plugins/cordova-plugin-advanced-http/1.11.1/cordova-plugin-advanced-http",
    "cordova-plugin-app-version": "0.1.9",
    "cordova-plugin-apprate": "1.5.0",
    "cordova-plugin-camera": "4.0.3",
    "cordova-plugin-contacts": "3.0.1",
    "cordova-plugin-crop": "0.4.0",
    "cordova-plugin-device": "2.0.2",
    "cordova-plugin-device-motion": "2.0.1",
    "cordova-plugin-dialogs": "2.0.1",
    "cordova-plugin-file": "6.0.2",
    "cordova-plugin-file-transfer": "file:local_plugins/cordova-plugin-file-transfer/1.7.1/cordova-plugin-file-transfer",
    "cordova-plugin-fingerprint-aio": "file:local_plugins/cordova-plugin-fingerprint-aio/1.7.0/cordova-plugin-fingerprint-aio",
    "cordova-plugin-geolocation": "4.0.1",
    "cordova-plugin-googlemaps": "2.6.2",
    "cordova-plugin-inappbrowser": "3.1.0",
    "cordova-plugin-ionic-keyboard": "2.1.3",
    "cordova-plugin-ionic-webview": "1.2.1",
    "cordova-plugin-ios-disableshaketoedit": "1.0.0",
    "cordova-plugin-iroot": "0.8.1",
    "cordova-plugin-locationservices": "file:local_plugins/cordova-plugin-locationservices/2.1.0/cordova-plugin-locationservices",
    "cordova-plugin-nativestorage": "2.3.2",
    "cordova-plugin-networkinterface": "2.0.0",
    "cordova-plugin-privacyscreen": "file:local_plugins/cordova-plugin-privacyscreen/0.3.1/cordova-plugin-privacyscreen",
    "cordova-plugin-proguard": "file:local_plugins/cordova-plugin-proguard/1.0.0/cordova-plugin-proguard",
    "cordova-plugin-safariviewcontroller": "1.6.0",
    "cordova-plugin-secure-storage": "git://github.com/mibrito707/cordova-plugin-secure-storage.git#v4.0.0-beta",
    "cordova-plugin-shake": "0.7.0",
    "cordova-plugin-splashscreen": "5.0.2",
    "cordova-plugin-statusbar": "2.4.2",
    "cordova-plugin-vibration": "3.1.0",
    "cordova-plugin-whitelist": "1.3.3",
    "cordova-plugin-x-socialsharing": "5.4.0",
    "cordova-support-android-plugin": "1.0.1",
    "cordova-support-google-services": "1.3.2",
    "cordova.plugins.diagnostic": "4.0.8",
    "cropperjs": "1.2.2",
    "crypto-js": "3.1.9-1",
    "es6-promise-plugin": "4.2.2",
    "fastclick": "^1.0.6",
    "gulp-cordova-version": "0.3.0",
    "ionic-angular": "3.9.2",
    "ionicons": "3.0.0",
    "jsbarcode": "3.9.0",
    "md5": "2.2.1",
    "moment": "2.20.1",
    "mx.ferreyra.callnumber": "0.0.2",
    "natives": "1.1.6",
    "ng-lazyload-image": "3.1.1",
    "ngrx-store-freeze": "0.2.0",
    "ngx-qrcode2": "0.0.8",
    "phonegap-plugin-barcodescanner": "file:local_plugins/phonegap-plugin-barcodescanner/7.0.2/phonegap-plugin-barcodescanner",
    "phonegap-plugin-multidex": "1.0.0",
    "phonegap-plugin-push": "file:local_plugins/phonegap-plugin-push/2.2.3/phonegap-plugin-push",
    "qrcode-generator": "1.1.0",
    "rxjs": "5.5.2",
    "shake.js": "1.2.2",
    "sw-toolbox": "3.6.0",
    "web-animations-js": "2.3.1",
    "yards": "0.1.4",
    "zone.js": "0.8.18"
  }

[JoostK]

Hello, we reviewed this issue and determined that it doesn't fall into the bug report or feature request category. This issue tracker is not suitable for support requests, please repost your issue on StackOverflow using tag angular.

If you are wondering why we don't resolve support issues via the issue tracker, please check out this explanation.

---

I don't think this is a framework issue, maybe something in Ionic or perhaps in your code, or a genuine bug in iOS. You're probably best of asking on StackOverflow.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}