search

kbrgl / svelte-french-toast

🍞🥂 Buttery smooth toast notifications for Svelte
https://svelte-french-toast.vercel.app/
MIT License
838 stars 30 forks source link

Mouseleave event is never triggered on iOS after interacting with a toast that has a button #12

Open axtn opened 1 year ago

axtn commented 1 year ago

https://github.com/kbrgl/svelte-french-toast/blob/533d5800519684fcef73f18d9024b6177ebc015f/src/lib/components/Toaster.svelte#L32

This is an issue on iOS devices (that I've tested... iOS 16 and iPad OS) When you click on a button (mouseenter) in a toast that has a rich content component (just like in the demo site dismiss btn), the subsequent toasts will be paused and never dismissed automatically.

In my app, I have to dispatch a custom event on dismiss to make sure subsequent toasts don't display forever document.querySelector('.toaster')?.dispatchEvent(new CustomEvent('mouseleave'));

kbrgl commented 1 year ago

Huh. That's odd. I imagine this may have something to do with the fact that pointer events are disabled somewhere in the CSS. But I don't see why it would happen only on mobile Safari.