fix(popover): render arrow above backdrop (#28986)

Issue number: resolves #28985

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

<!-- Please describe the current behavior that you are modifying. -->

When a popover is being rendered in iOS mode, the arrow renders under
the backdrop.

![Screenshot 2024-02-06 at 11 59
58 AM](https://github.com/ionic-team/ionic-framework/assets/13530427/b55f8868-4de3-4f52-8e79-650a40f8d5bd)

<!-- Please describe the behavior or changes that are being added by
this PR. -->

- The arrow renders at the same level as the content.

![Screenshot 2024-02-06 at 11 59
51 AM](https://github.com/ionic-team/ionic-framework/assets/13530427/05c214ee-6ba7-4cad-b00e-9668dca23f73)

- [ ] Yes
- [x] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer
for more information.
-->

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

Credit [Sahil-B07](https://github.com/Sahil-B07) for providing the
[fix](#28430). A new
PR had to be created in order to update snapshots.

---------

Co-authored-by: Sahil Bhor <[email protected]>
Co-authored-by: ionitron <[email protected]>

Author: 3 people

core/src/components/datetime-button/test/overlays/datetime-button.e2e.ts-snapshots/datetime-overlay-popover-ios-ltr-Mobile-Chrome-linux.png

@@ -35,6 +35,13 @@
   height: 10px;
 
   overflow: hidden;
+  /*
+   * Required for the arrow to render above the backdrop.
+   * Otherwise, the arrow will appear slightly transparent.
+   * The value is set to 11 since it's the minimum value that
+   * will allow the arrow to render above the backdrop.
+   */
+  z-index: 11;
 }
 
 .popover-arrow::after {