bug: Popover arrow is rendered under the backdrop

[sean-perkins]

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

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

[thetaPC]

Thank you for the issue! I was able to replicate it using Firefox, Chrome, and Safari with a Mac.

[Sahil-B07]

Hi, I would like to work on this issue 🙂

[thetaPC]

Update: I have verified that this issue is not being replicated within Ionic Framework. It's only happening within the Ionic docs site.

[thetaPC]

After discussing with the team, the issue indeed lies within the Ionic Framework.

[thetaPC]

Thanks for the issue! This has been resolved via #28986 and will be available in an upcoming release of Ionic.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.