Skip to content

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!

Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
@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
@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

3 participants