Skip to content

fix(action-sheet): iOS dismiss animation respects safe area - #28915

Merged
sean-perkins merged 10 commits into
mainfrom
sp/FW-5608
Feb 6, 2024
Merged

fix(action-sheet): iOS dismiss animation respects safe area#28915
sean-perkins merged 10 commits into
mainfrom
sp/FW-5608

Conversation

@sean-perkins

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

Copy link
Copy Markdown
Contributor

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
Comment thread core/src/components/action-sheet/test/basic/index.html Outdated
@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
Comment thread core/src/components/action-sheet/action-sheet.ios.scss

@liamdebeasi liamdebeasi left a comment

Copy link
Copy Markdown
Contributor

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!

Comment thread core/src/components/action-sheet/action-sheet.ios.scss
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

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