Ion-popover shows in different places based on what clicks it

So I use FontAwesome which converts icons to SVG instead of ion-icons. My issue is when you click the “…” SVG right in the middle, the popover shows right below the SVG. But if you avoid the SVG and click the ion-button the popover is just below the button. Makes sense since it’s likely aligning based on what you clicked. I want it to always line up to the button bottom. Possible? I know it probably has to do with event.currentTarget and getting coordinates off that?

Repo: Repo: GitHub - tylerclark/ionicIssues

Screenshot 2023-07-06 at 7.02.59 PM

vs

Screenshot 2023-07-06 at 7.03.04 PM

In case anyone is wondering, I fixed this by

Changing the way the event was passed in because mobile Safari has issues giving up currentTarget:

<ion-button @click.stop="openMenu({ currentTarget: $event.currentTarget })>Menu</ion-button>
popover = await popoverController.create({
   component: Menu,
   event: e.currentTarget,
});

to

popover = await popoverController.create({
   component: Menu,
   event: { target: e.currentTarget },
});