-
Notifications
You must be signed in to change notification settings - Fork 13.5k
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
bug: interactions not allowed on app until page transition animation has completed #27748
Comments
Thanks for the report. Can you please clarify what the expected behavior is here? Scrolling should be blocked until the transition is complete. This behavior aligns with how native iOS apps behave. |
Hi there! Expected behavior is two things:
I speculate that fixing 2) would "fix" 1) because there would always be an ion-page scrollable target, and scroll gestures wouldn't get latched to the document (above webkit bug). I've received quite a bit of feedback over the past week from wefwef users about how the current behavior is irritating to wait for the animation to complete, especially when swiping back and forth a lot. I hope that helps!! :) |
Yeah this is an unfortunate bug. In my experience posting comments on the WebKit thread about how this bug impacts your application can help the WebKit team prioritize the fix appropriately. It sounds like getting https://bugs.webkit.org/show_bug.cgi?id=214781 fixed (a related issue) would significantly improve the UX here.
I'm not sure I understand the use case for this. What's the benefit of being able to scroll a partially obscured page? The page elements are not set in the Shadow DOM. Your video in #27748 (comment) at timestamp 0:10 shows the page content in the light DOM. You could override this, but it may cause unexpected behaviors. |
Imagine you're scrolling a feed, you tap into something, swipe back to the feed, and then want to keep scrolling. Once the page starts transitioning you start scrolling down, because you know the item you just read is what the feed is focused on. That's the use case - I can make another video if it would help :)
I've actually just tried this, thanks for the suggestion! - but the problem is that it only works in a forward direction, because in that case the page transitioning to has a higher z-index. Code: .ion-page ion-content {
pointer-events: all !important;
} (It also has issues where sometimes the scroll target is captured by the leaving ion-page - which could be fixed by an ion-page-leaving class. I'm just trying to think of the easiest way to solve this... Maybe if there was a Here's the code that I'd love if it were possible: .ion-page:not(.ion-page-leaving) ion-content {
pointer-events: all !important;
} Unfortunately I can't test out if this would work easily since it would require modifying ionic. |
I don't understand why this is a desired behavior. Being able to interact with a page mid-transition would also mean you could potentially navigate to another page while a navigation is already in progress. At that point it's not clear what should happen. (Should it be ignored? Should the new transition interrupt the old transition? Should the new transition only run when the old transition finishes?). The requested behavior also does not align with how native mobile apps typically work, so I'm not sure this feature would be a good fit for Ionic. |
I totally get that. However, this is something I keep hearing from users. To be fair, it might be mainly due to the safari scroll latching bug. Would it help if I did some more research to find native apps that behave this way? Thanks for discussing this with me! |
Perhaps I am misunderstanding what the root issue is. In #27748 (comment) you provided a video that demonstrated how long it takes for Is the problem here that |
Thanks for the issue! This issue is being closed due to the lack of a reply. 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. Thank you for using Ionic! |
Prerequisites
Ionic Framework Version
v7.x
Current Behavior
You cannot scroll down a page during a page transition
Expected Behavior
Page should accept interactions before page transition has completed
Steps to Reproduce
Code Reproduction URL
No response
Ionic Info
Additional Information
This bug is made a bit more serious by https://bugs.webkit.org/show_bug.cgi?id=222654
You can experience this bug in production at https://wefwef.app
Please see a demo video (with narration) explaining the video in real time:
IMG_2717.mp4
And here's a video (without narration) demonstrating how long it takes for
pointer-events: none
to be removed from both pages by slowing down the animation to 10% real time:Kapture.2023-07-05.at.12.13.50.mp4
Related bug: aeharding/voyager#18
The text was updated successfully, but these errors were encountered: