An annoying little square on Android devices

[bgoetzmann]

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

[vaibsVB]

Your issue is similar to this topic.

Weird square appearing on Android

Hi, I’m near to publish a game (made with Ionic of course) on Android, that uses inline SVG. All is OK on the last Android version (5) and the previous one, but on my Galaxy S2, under Android 4.1, I get something strange: while pressing on a SVG circle tag (defined on a view) on which a ng-click is defined, a weird little square appears around the top left of the screen. It disappears when I release the circle. I suppose that this particular problem is related to the SVG support of the browse…

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

[vaibsVB]

Below link also having the same issue.

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

Gray box in beginning of ion-content

After some investigation it looks like the grey square is in fact the y-axis scrollbar of the scroll-content element. When I change the overflow-y value from scroll to auto it seems to fix it. scroll-content{ overflow-y:auto; }

[bgoetzmann]

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

[vaibsVB]

Welcome. Glad that works for you.

Happy Coding

[andyi]

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

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

[RomnEmpire]

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?