Bug 213987 – [Web Animations] Tap event container offset for Angular Drop Animation

• Component: Animations
• Status: NEW

[megatcorleone]

Created attachment 403583 [details]
Game Screenshot

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

Application: Ionic Native + Angular + Cordova 

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.

<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>

[Radar WebKit Bug Importer]

<rdar://problem/65123664>

[Antoine Quint]

This bug report does not have sufficient information to act on it. Ideally, a reduced testcase would be attached to this bug and reproduce the issue in Safari on an iOS device. Failing that, a way to run your app would be welcome, I simply cannot tell what it is. Finally, I have some questions: does your app use UIWebView or WKWebView? Does it also reproduce with the iOS 14 beta?

[megatcorleone]

Hi Antoine, we never tested on iOS 14 Beta yet. I have tried fully WKWebview without UIWebView seems not working also. Does iOS 14 Beta have some kind of fixes for related to the web animation?

[Antoine Quint]

Yes, we continuously fix bugs between releases. However, I don't know if they might be related to what you are seeing since you have not provided me with a way to diagnose your issue. Please provide a test case, otherwise we'll have to close this bug since there is no actionable information.

[Antoine Quint]

I found https://github.com/angular/angular/issues/37684 which seems to be the same bug report on Angular, but there is no test case attached either.