An annoying little square on Android devices


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?



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.

Below link also having the same issue.

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

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

There is an open issue for that:

Welcome. Glad that works for you.

Happy Coding :wink:

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


sir i have tried above it is working initially but after swipe the side menu it will show again gray square in ionic3 and i am using android 7.1?