Software Archive
Read-only legacy content
17060 Discussions

css translate3d : webview scrollbar appears

Fab_V_
New Contributor I
1,021 Views

It is a quite delicate problem.
using cordova 5.1.1 with appframework 3.
i have a sliding panel that looks like facebook app, that is to say, i swipe view to reveal it .
the sliding effect and side menu is not the appframework one, it is a custom development.
the problem appears only on Android and only in this case :
- when i switch to another app or put it in background (the android view to see all opened app to close them for example) and reselect it.
so, the problem appears when the app is putted in background re-focus after.

When a swipe the view to reveal side menu, an horizontal scroll bar appears.
in css body, page upage etc... are all overflow hidden, on IOS no problem, chrome mobile debug no problem.
i tried to fix body width in javascript, to replace position absolute with fixed and so on.. nothing worked.
the problem appears on Android, i don't know if all mobiles are impacted bu on my LG G3 yes.
the document is not horizontally scrollable so the scrollbar has no impact on usability.
the style of the scrollbar makes me think it is the webview that create the scrollbar
 

Another thing; if i let the scrollbar fading and disappear the problem is corrected unless i put app in background and focus it again etc....

how to fix it ?

here is a screenshot to explain


 

0 Kudos
6 Replies
PaulF_IntelCorp
Employee
1,021 Views

Are you doing this testing with the Crosswalk webview? For anything complex you should be using Crosswalk, the Android 4.x webviews are inconsistent and unreliable. If you use the Debug tab you are running in Crosswalk. If you run in App Preview you are running in an Android webview. Obviously, you must build for Crosswalk to get the Crosswalk webview in your built app.

Do not rely on the Emulate tab to determine what this behavior will be on a real device, it will not simulate that behavior properly.

0 Kudos
Fab_V_
New Contributor I
1,021 Views

This is an Android Build and not crosswalk

and the problem only appear on Android phone with the built app.
 

0 Kudos
Pamela_H_Intel
Moderator
1,021 Views

Go ahead and try building "Crosswalk For Android" and let us know if you still have the scroll bar problem.

0 Kudos
Fab_V_
New Contributor I
1,021 Views

ok, i tried with a crosswalk build and the problem doest not appear.
For some professional reasons i need the Android build and not crosswalk.
 

0 Kudos
Fab_V_
New Contributor I
1,021 Views

FYI, i tried with the X86 APK.

0 Kudos
PaulF_IntelCorp
Employee
1,021 Views

Not sure what you mean by "I tried with the X86 APK." There are two APK files generated, you need both to install both into the store to insure the store can deliver an appropriate binary to all Android devices (some Android devices are x86 and some are ARM).

For professional results, I highly recommend you use the Crosswalk solution; specifically, use CLI 5.1.1 and Crosswalk 15. You will never be able to insure that every Android 4.x device that runs your device will work properly, it's nearly impossible to test against all the variations. This is why the Crosswalk solution exists and this is why Google changed to a replaceable webview beginning with Android 5. Sorry, but the XDK does not have any control over the HTML5 behavior of the built-in webviews, thus the reason we provide the Crosswalk solution.

0 Kudos
Reply