bug: Popover points arrow at incorrect position in iOS mode (Ionic 6)

[patiparnne]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• v4.x
• v5.x
• v6.x

Current Behavior

Popover points arrow at incorrect position in iOS mode
It pointed correctly on @ionic/angular version 5.9.2 and not with version 6.0.0

@ionic/angular version 5.9.2

@ionic/angular version 6.0.0

Expected Behavior

Popover should point at the center of source element

Steps to Reproduce

1. Add ion-popover to project with mode="ios" or test on ios
2. Run on iOS device/simulator or iOS device mode on Chrome

Code Reproduction URL

https://github.com/armspativong/ionic-issues.git

Ionic Info

Ionic:

• Ionic CLI : 6.18.1 (/usr/local/lib/node_modules/@ionic/cli)
• Ionic Framework : @ionic/angular 6.0.0
• @angular-devkit/build-angular : 12.2.12
• @angular-devkit/schematics : 12.2.12
• @angular/cli : 12.2.12
• @ionic/angular-toolkit : 5.0.0

Capacitor:

• Capacitor CLI : 3.2.5
• @capacitor/android : 3.2.5
• @capacitor/core : 3.2.5
• @capacitor/ios : not installed

Utility:

• cordova-res : not installed globally
• native-run : 1.5.0

System:

• NodeJS : v14.17.6 (/usr/local/bin/node)
• npm : 8.1.2
• OS : macOS Monterey

Additional Information

No response

[katche70]

Hi, I updated to ionic6 yesterday and can confirm the problem

[queejie]

When I upgraded, the positioning arrow is completely gone, and the positioning often goes off the page. There are no error messages. Using with Angular 12.2.

[billygerhard]

I am getting this same behavior with v6 as well. Its is pointing to the end slot of the item when I use it. Also to note arrow is not a property on PopoverOptions to simply turn it off, so we have to deal with a broken arrow if we use the popover controller.

[MisterNuff]

Hey I've got the exact same issue. After upgrading to Ionic 6. I've tested it with an Ionic Starter App(Conference) & and came to the same result. The pointer on mode ios is not a the position of the event click (Information icon).

Ionic Infos:
Ionic CLI : 6.18.1
Ionic Framework : @ionic/angular 6.0.2
@angular-devkit/build-angular : 13.0.1
@angular-devkit/schematics : 13.0.1
@angular/cli : 13.0.1
@ionic/angular-toolkit : 2.2.0

Thanks in advance :)