Gray box in beginning of ion-content

Ionic Framework ionic-v3
1

I am observe on many pages an artifact: a small square gray element.

Is it known issue?

image

1 Like
4

What was it? Instead of deleting let us know

5

I thought I have found a solution, in practice it was auto-reload of source changes. The gray boxes did not disappear.

The gray boxes are non-consistent, if I push a new page and then pop it back they disappear. It seems currently whenever/if I will find time I will make plnkr and post in github about it. If no reply in near future.

6

I’ve seen it too, and somebody else on slack mentioned it, but I only see it inconsistently. Apparently the ionic devs haven’t seen it yet.

7

Yeah I have not see it in my tests at all so far

8

This box shows on my system after closing an ion-menu.

9

This is known issue, jgw96 is in process of fighting it

1 Like
10

I have the same issue as well.

11

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;
}
4 Likes
12

I could reproduce it too on Android (6, Nexus) phone

On iOS (real device, 4s), iOS (debug, 6s), Safari and Chrome I couldn’t reproduce it

If that could help to find a solution…

1 Like
13

I have the same light grey box as well in Mobile mode on Chrome and on Android build.

14

Good news! it probably was fixed… waiting for next version.

15

wait for next release to fix the issue…

Till the time follow the william_harris reply/solution above. This will work to get rid out of it.

16

i removed padding from ion-content and configured it manually using css… and for me it worked

what u need to have is any element right next to header, so there is no space between header and content

just remove padding from content and instead of blank space between header and content add any element with background color transparent and it will dissapear

also scroll-content overflow auto didnt work for me

17

even in 2017 still this issue is coming. thanks this worked to resolve it

18

The issue is opened in GitHub since the 3rd May 2016 (> 1 year ago)

But I understand it wasn’t the most important thing for Ionic, I would still rather like to see improvements in the boot time :wink:

19

its happening in 3.6.0 too… it appears after dismissing keyboard and then clicking on content, the square appears in every page that has input and requires opening keyboard. this didn’t occur before

20

It’s not an error/bug/glitch, it’s the content itself.
I get it all the time; it’s the dev environment in chrome.

It could be a fresh Ionic app and the Dev Environment will still show it.

It’s something in ionic; but it’s harmless.

Based on my hours and hours of investigations anyways.

Try refreshing the page in your new Dev Environment (iPhone 5/6/ Galaxy SIII).
It’ll vanish.

21

Saved my time, Thanks @william_harris

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

Sir it is not working for .after initially it is working but after jump new page and back to home page.it will show again gray dot plz tell me sir how t fix this?