An annoying little square on Android devices


#1

Hello,

Recently I published an Android application, iPlantUML developped with Ionic 2, and for which I started from the sidemenu template. I noted a little problem: sometimes a little square appears when I activate a page from the side menu.
I see this problem on a Galaxy Note 4 with Android 6.0.1 and on a Galaxy S6 Edge, also with Android 6.0.1, and on an Asus ZenPad with Android 5.0.2.

I can reproduce this problem with a simple Ionic sample application using the sidemenu template (with latest CLI and latest libraries) :

Note the small square just below the header!

By inspecting the view with Chrome Tools (with the application deployed on my device), it seems that it’s not correspond to a HTML element, So I suppose, it’s related to the Android WebView.
Note: the “square” doesn’t show in a desktop web browser.

As this square is annoying, is someone had such thing and find a way to avoid it?

Thanks,

Bertrand


#2

Your issue is similar to this topic.

EDIT: Excuse, this belongs to Ionic only.
for a Possible solution in Ionic 2, look for below reply.


#3

Below link also having the same issue.

Follow below link, a solution provided by william_harris absolutely help you.


#4

Thank you very much! The solution from william_harris worked for me.

There is an open issue for that: https://github.com/driftyco/ionic/issues/6416


#5

Welcome. Glad that works for you.

Happy Coding :wink:


#6

I can confirm that this CSS (william_harris’ solution) removes the grey box in Ionic 1:

.scroll-content{
    overflow-y:auto;
}