Skip to content
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(action-sheet): iOS dismiss animation respects safe area #28915

Merged
merged 10 commits into from
Feb 6, 2024

Conversation

sean-perkins
Copy link
Contributor

@sean-perkins sean-perkins commented Jan 30, 2024

Issue number: resolves #28541


What is the current behavior?

On iOS when dismissing the ion-action-sheet, the animation does not account for the safe area of the device. This results in the action sheet not completely animating off the visible viewport on a device with safe area enabled.

What is the new behavior?

  • The ion-action-sheet will animate consistently off the viewport when dismissing, including the safe area.

To better support custom animations not needing to account for the safe area, the safe area has been added to the padding of the action sheet container. This results in the height increasing based on the bottom safe area and animating correctly when translating between 100% and 0%.

Before After
Kapture.2024-02-01.at.18.08.14.mp4
Kapture.2024-02-01.at.18.05.06.mp4

In the recorded examples the bottom safe area is exaggerated to show the dismiss animation differences.

Does this introduce a breaking change?

  • Yes
  • No

Other information

To test this PR, I would recommend adding the following styles to the action sheet basic test:

<style>
ion-action-sheet {
  --ion-safe-area-bottom: 100px;
}
</style>

You can then open dev-tools and slow the animation speed to 10%:

CleanShot 2024-01-29 at 19 49 32@2x

  • Open and dismiss the action sheet tied to the "Basic" button.
  • Verify that the action sheet animates completely off the view when dismissed.
  • Open the and dismiss the action sheet tied to the "Custom CSS Class" button. This implementation customizes the --height of the action sheet.
  • Verify that the action sheet animates completely off the view when dismissed.

@github-actions github-actions bot added the package: core @ionic/core package label Jan 30, 2024
@sean-perkins sean-perkins marked this pull request as ready for review January 30, 2024 21:29
@sean-perkins sean-perkins requested a review from a team as a code owner January 30, 2024 21:29
@sean-perkins sean-perkins requested review from liamdebeasi and removed request for a team January 30, 2024 21:29
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.

One non-blocking comment. Great job!

@sean-perkins sean-perkins added this pull request to the merge queue Feb 6, 2024
Merged via the queue into main with commit 7449fb4 Feb 6, 2024
46 checks passed
@sean-perkins sean-perkins deleted the sp/FW-5608 branch February 6, 2024 23:43
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: Action sheet does not completely translate off bottom of page with safe areas
3 participants