I’m looking at porting/improving a web application we have now in pure Vaadin to use TouchKit. I played around with the demo mail and parking applications and things looked really good. I then wrote a prototype application and found that I had odd scrolling behavior when the application was full screen, that is, launched from a home screen icon in iOS 6 on an iPhone 5.
It looks like the issue is the rubberbanding (a.k.a. bounce) when the NavigationView scrollable area reaches the top. When the scrollable content reaches the top, the entire application drags down, revealing empty space at the top. This then puts the application in a weird “bounce” mode where scrolling up and down doesn’t work. If you remove your finger from the screen, wait a second or two, and scroll again, things seem fine.
This seems to be a well documented issue in iOS, first in Safari but now fixed but it looks like the issue remains with full screen apps.
What I couldn’t understand is why the demo applications appeared to work correctly while my applications did not. I cloned the parking application from git and compiled it locally and it still worked correctly. I then updated the POM to use 7.1.4 and immediately the problem showed up in the demo. It looks like something changed between 7.1.0 and 7.1.4 where v-ios6 gets added to the UI and the scroll hack that uses translate3d is no longer used. Unfortunately this has the side effect of bringing the “bounce” issue back.
It looks like most people are solving the issue with something like
ScrollFix
but TouchKit doesn’t seem to include anything similar. Has anyone else experienced this issue with NavigatorView? Are there any other workarounds besides writing a wrapper extension for ScrollFix?
Unfortunately with this bug (in iOS in my opinion) TouchKit apps just don’t feel native enough and can be confusing for users when the “browser” enters bounce mode for a full screen application.
BTW,
this discussion
at StackOverflow describes the issue in detail. It would be nice if it was handled natively in TouchKit.
-mike