Interaction during a transition

Questions
1

Just a fairly minor aesthetic thing, but I noticed that you have to wait until a page transition completes before you are able to scroll on the page that is transitioning in. If you do attempt interaction before the transition completes, the view scroll bounces at the top and bottom of the visible area, and access to the page or its off screen content is blocked indefinitely until you release and wait for the bounce momentum to settle.

Video here, illustrating this on the kitchen sink app, during the transition from the home page to Virtual List.

Just wanted to say, I don’t mean to nitpick as I’m finding this framework really superb. I just find myself very often doing this in the app I’m building, even though I’ve reduced the transition durations considerably, as a way of compensating.

As someone who’s background is in native app development, rather than web dev, I really notice the way this quirk impacts the general feel/fluidity, in a UI experience that is otherwise excellent. I was wondering if there is either a simple fix for this, or if it might be considered for improvement in a future release.

edit: I think a perfectly good solution, if possible, would be to just disable interactions during a transition.

Thanks.

2

Ok having gone down the rabbit hole I see it’s not a framework issue. It’s caused by how iOS Safari implements bounce scrolling on the main body.

FWIW I tried a bunch of different approaches, and this is the one that plays best for me, although I haven’t tested it extensively. A simple import of inobounce.js locks the body successfully, on both regular and full home screen versions of my web app, whilst not seeming to cause any input issues with Framework7. One caveat though is that it says it doesn’t work for horizontal scrolling (I don’t need this fortunately). Also, whether this will behave differently on older iOS versions, who knows.

1 Like