Strange Scrolling Behavior

[borth]

Phone: Samsung Galaxy S8+

OS: Android 7.0

Using the webviewer to display a website.

Unexpected behavior: When scrolling upward towards the top of the webpage, certain web elements will cause the page to scroll back down towards the bottom of the page quickly in the opposite direction. It is dependent upon what type of element is on the page. Keep in mind that this is not and has never been an issue when viewing with a standard browser (chrome, firefox, etc). This behavior will immediately cancel the upward scrolling and immediately start scroll down towards the bottom of the page when I lift my finger from the screen. I can use two fingers to scroll towards the top, but I must always have at least one finger on the screen and must scroll very slowly. 

Web page element causing the issues: Google Maps javascript API and bootstrap accordion. When scrolling towards the top of the page, starting the scroll/swipe from these elements, causes the scrolling issue. When scrolling on any other element on the page, the scrolling behavior is normal and as expected. Even though Google Maps requires two fingers to scroll the map, this is not causing the issue. For bootstrap, the scrolling action does not expand the accordion. The accordion behavior is never triggered.

This is creating an unpleasant user experience. I have not had a chance to try this on other phones. Any suggestions as to the cause of this behavior? Any suggestions on correcting the behavior?

[Evan Patton]

Hi borth,

App Inventor use the built-in Android WebView component for the web viewer, so I would expect that this issue might affect any app that uses that particular widget. That being said, here are a few things you might want to test:

1) Does disabling either of the frameworks stop the autoscrolling behavior? If so, that might indicate a bug in that framework.

2) Does your phone have the Android System Webviewer package installed and is it up-to-date? Some users have reported issues where the App Inventor webviewer does not render pages with the most recent update. Maybe the behavior problems are also related?

3) Use a tool like AppToMarket to increase the minimum SDK to a higher value, e.g. 14. This will replace the default webview implementation with a Chrome-backed version on most phones, which may solve your problem.

4) Check whether or not you are using a combination of Scrollable on the screen and Fill Parent on the webview. I could imagine a scenario where the page is resizing its content and that might cause an effect that looks like scrolling but isn't.

Let us know if any of these checks helps,

Evan