-
Notifications
You must be signed in to change notification settings - Fork 13.5k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
fix(popover): render arrow above backdrop #28986
Conversation
@@ -35,6 +35,7 @@ | |||
height: 10px; | |||
|
|||
overflow: hidden; | |||
z-index: 12; |
There was a problem hiding this comment.
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?
There was a problem hiding this comment.
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; |
There was a problem hiding this comment.
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.
There was a problem hiding this 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.
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]>
Issue number: resolves #28985
What is the current behavior?
When a popover is being rendered in iOS mode, the arrow renders under the backdrop.
What is the new behavior?
Does this introduce a breaking change?
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 [email protected]