bug: Swipe to dismiss not working properly on toast with customized ::part(container) css

[aeharding]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v8.x

Current Behavior

I have some CSS to center the toast message with its icon. Here is the css:

ion-toast::part(container) {
  display: inline-flex;
  transform: translateX(-50%);
  left: 50%;
  position: relative;
}

With this CSS, I can no longer swipe to dismiss unless I start the swipe from over the .toast-container element:

This is because the ion-toast has pointer-events: none and it is reset on the .toast-container element with pointer-events: auto.

Expected Behavior

Can swipe from anywhere on the toast, even with custom layout applied to ::part(container)

Steps to Reproduce

1. Visit https://stackblitz.com/edit/kvqhk5
2. Open toast
3. Try to swipe from the far left and right sides of the toast. Observe it doesn't work.
4. Try to swipe from the center of the toast. Observe it works.

Code Reproduction URL

https://stackblitz.com/edit/kvqhk5

Ionic Info

Latest Ionic Stackblitz

Additional Information

This could be fixed by moving pointer-events: auto from .toast-container to .toast-wrapper. I will make a pr :)

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.