fix(popover): render arrow above backdrop #28986
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
liamdebeasi reviewed Feb 6, 2024
| height: 10px; | ||
| | ||
| overflow: hidden; | ||
| z-index: 12; |
There was a problem hiding this comment.
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.
Linking my comment in this thread since it's related.
thetaPC commented Feb 7, 2024
| * 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.
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.
liamdebeasi approved these changes Feb 7, 2024
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.  <!-- Please describe the behavior or changes that are being added by this PR. --> - The arrow renders at the same level as the content.  - [ ] 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>
This was referenced Feb 7, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit. This suggestion is invalid because no changes were made to the code. Suggestions cannot be applied while the pull request is closed. Suggestions cannot be applied while viewing a subset of changes. Only one suggestion per line can be applied in a batch. Add this suggestion to a batch that can be applied as a single commit. Applying suggestions on deleted lines is not supported. You must change the existing code in this line in order to create a valid suggestion. Outdated suggestions cannot be applied. This suggestion has been applied or marked resolved. Suggestions cannot be applied from pending reviews. Suggestions cannot be applied on multi-line comments. Suggestions cannot be applied while the pull request is queued to merge. Suggestion cannot be applied right now. Please check back later.
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 92709590+Sahil-B07@users.noreply.github.com