Skip to content

Conversation

thetaPC
Copy link
Contributor

@thetaPC thetaPC commented Feb 6, 2024

Issue number: resolves #28985


What is the current behavior?

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

Screenshot 2024-02-06 at 11 59 58 AM

What is the new behavior?

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

Screenshot 2024-02-06 at 11 59 51 AM

Does this introduce a breaking change?

  • Yes
  • No

Other information

Credit Sahil-B07 for providing the fix. A new PR had to be created in order to update snapshots.


Co-authored-by: Sahil Bhor 92709590+Sahil-B07@users.noreply.github.com

@github-actions github-actions bot added the package: core @ionic/core package label Feb 6, 2024
@thetaPC thetaPC marked this pull request as ready for review February 6, 2024 21:28
@thetaPC thetaPC requested review from a team and liamdebeasi as code owners February 6, 2024 21:28
height: 10px;

overflow: hidden;
z-index: 12;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we add a comment here describing why this is necessary? Also is there a reason why we specifically chose 12?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Linking my comment in this thread since it's related.

* 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;
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I switched it from 12 to 11. I was on the fence between these. I had 12 because it was one value above the minimum. This would allow for one pixel buffer just in case. But the more I thought about it, the more I don't think we need the buffer.

Copy link
Contributor

@liamdebeasi liamdebeasi left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good! Be sure to give co-author credit when merging.

@thetaPC thetaPC added this pull request to the merge queue Feb 7, 2024
Merged via the queue into main with commit 946b488 Feb 7, 2024
@thetaPC thetaPC deleted the FW-4502 branch February 7, 2024 17:42
@thetaPC thetaPC restored the FW-4502 branch February 7, 2024 18:38
liamdebeasi pushed a commit that referenced this pull request Feb 7, 2024
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 <92709590+Sahil-B07@users.noreply.github.com>
Co-authored-by: ionitron <hi@ionicframework.com>
@thetaPC thetaPC deleted the FW-4502 branch February 7, 2024 18:54
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

package: core @ionic/core package

Projects

None yet

Development

Successfully merging this pull request may close these issues.

bug: Popover arrow is rendered under the backdrop

3 participants