bug: Popover arrow is rendered under the backdrop

[sean-perkins]

Prerequisites

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

Ionic Framework Version

v7.x

Current Behavior

This issue only seems to reproduce on Mac

As seen in the Side and Alignment Demo, when the popover is presented in iOS the arrow is lighter than the popover container as a result of rendering under the backdrop.

Additionally, while hard to visibly see based on the background color, the arrow is not tight to the container and is ~1px offset from where it should render.

Expected Behavior

1. The popover arrow should have the same visible background state as the popover container. With brief exploration, the z-index of .popover-arrow should be 11 or greater.
2. The popover arrow should be tight to the container, as seen in the Human Interface Guidelines. With brief exploration, the fractional units used for the top value are causing the arrow to render incorrectly. Flooring the value results in the correct display.

Here is a modified example of the expected visual state:

Steps to Reproduce

1. Visit the Side and Alignment Demo
2. With iOS active, Click "Side=Top, Alignment=Center" button
3. Observe: The arrow for the presented popover is not the same background color as the popover container.
4. Observe: The arrow is offset from the container.

Code Reproduction URL

No response

Ionic Info

N/A

Additional Information

Tested on Google Chrome: Version 113.0.5672.126 (Official Build) (arm64)

This issue is not captured in our visual regression tests: https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/popover/test/arrow/popover.e2e.ts-snapshots/popover-arrow-ios-ltr-Mobile-Chrome-linux.png