Ionic-framework: ionic 2 menu grey square

[vonovak]

Short description of the problem:

When using the project created by ionic start mem2 tutorial --v2 and running on android 5.1.1 device.

When the app starts up:

When I toggle the menu and then hide it. (note the grey square under the hamburger menu)

What behavior are you expecting?

I would expect the images to look the same (note the grey square under the hamburger menu).

Steps to reproduce:

1. ionic start mem2 tutorial --v2
2. ionic run android
3. Swipe the menu right and left / toggle it by the "toggle menu" button or hamburger menu button and swipe back. Apparently the bug doesn't exhibit itself each time you run the app.

When the grey square is present, it seems that pressing the blue button makes it go away.

Cordova CLI: 6.1.1
Ionic Framework Version: 2.0.0-beta.6
Ionic CLI Version: 2.0.0-beta.25
Ionic App Lib Version: 2.0.0-beta.15
OS: Distributor ID: Ubuntu Description: Ubuntu 15.10 
Node Version: v5.10.1

[jgw96]

Ahh good catch! I can see this with our sidemenu starter on Android 5.1.1, Android 6.0.1 and Android N dev preview 2.

[MartineFrancken]

I'm experiencing the same problem with Ionic 1 (version Delhi and higher).

[WHarris22]

+1 in Ionic 2 beta 7

[nyankobu010]

+1 occurs in platform:ios too when using chrome debugger, Ionic 2 beta 7.

[nyankobu010]

Found out this only occurs when the content doesn't overflow the particular screen size being tested (when you aren't able to scroll for a particular view). Hope this helps someone with finding the root cause.

[jgw96]

Hello all , this has been fixed for our beta.10 release. If you would like to try it out early you can install the latest ionic 2 nightly with npm install ionic-angular@nightly. There are some very minor breaking changes in this release that we will have full upgrade instructions for when we release but the biggest thing is that

<ion-navbar *navbar>
</ion-navbar>

should be changed to this

<ion-header>
  <ion-navbar>
  </ion-navbar>
</ion-header>

Thanks for using Ionic!

[jgw96]

Seeing this issue again with the latest nightly. Reopening to investigate more.

[lordgreg]

Exactly the same issue.

[jgw96]

Note for the team: Did some debugging on this and got some really weird results. If you inspect the page with chrome dev tools that little grey square does not seem to be in the dom.

[ghenry22]

I still see the little gray square on both ios and android devices with beta10

[tarasok]

It is also reproduced on ionic 1.3.
Small grey box in empty list. When I'm trying to change any style of content (in chrome dev tools) - the box is gone, even I revert my changes.... it's really strange...

[WHarris22]

I've noticed two things when I play around in the chrome dev tools, but neither really help with finding the cause of it but could help with the DOM location (ion-header or scroll-content or my testing could just be wrong all together!).

First off, if you untick the ion-header element property position: absolute; the header goes back to position: static; which hides the header and the grey square behind the ion-content as this element is 100% height and width. So this must mean it is something to do with the ion-header element right?

And second, I've also noticed that if you increase the property margin-top:56px; to lets say 100px on the scroll-content element inside the ion-content this causes the square to move further down the screen.

So two different thiings seem to affect the grey square but are not child or parent elements they are more sibling / adjacent to each other. Hmmmm

Note: changing values in chrome inspector cause the square to disappear, so you have to open and close the menu again to see where it gets re-positioned.

[WHarris22]

I think i've came to the conclusion that it is the scrollbar of the scroll-content element!!

On the scroll-content element if you change overflow-y: scroll; to overflow-y:auto; it gets rid of it. And also if you change overflow-x: hidden; to oveflow-x:scroll; the grey square changes slightly due to the vertical and horizontal scrollbars overlapping :)

So I think the correct fix (that works for me) is

scroll-content{
      overflow-y: auto;
}

Not sure if this will cause anything else to break or not though

[WHarris22]

Something else that seems to make the square disappear is when you do the following

<ion-content fullscreen="true">

I hope this information is helpful for implementing a fix

[kodeine]

i started to see this more often in beta11 than beta8

[jgw96]

Hello! Happy to report that i can no longer reproduce this issue with the latest nightly. Because of this, I am going to be closing this issue for now. Thanks for using Ionic!

[laserus]

@jgw96 please reopen, the bug is there again.

[filipsuk]

@jgw96 The issue occured for me in modal page (.modal-wrapper). I fixed it with overflow-y:auto on .scroll-content. Happened on Android device, not in desktop chrome.

Version: 2.0.0-rc.1-201610191717 (nigtly)

[kodeine]

@jgw96 i'm getting the square box in rc1 as well.

[ghenry22]

Also getting this in rc1

[johnbwoodruff]

@jgw96 also happening to me in rc1.

[ibonkonesa]

In my case, that only happen if I have inputs and these don't have placeholder...

[felipeands]

ion-content fullscreen="true"
fix it on rc1

[laserus]

@felipeands it is not a fix, probably the grey box is there behind navbar.... =)

[gregvis]

This is also happening to me on ionic 1.3.2. Can a fix be implemented for ionic v1 as well?

I tried the suggestion to set
.scroll-content{ overflow-y: auto; }
Which seems to fix it when your main content is displayed, however, when I open the left side menu, it appears again.

Edit: it appears that the css above does indeed fix it on ionic v1...disregard my statement about it appearing when the menu is opened. My sass watch wasn't running for some reason.

[aggarwalankush]

same issue in rc2 also

[peterpeterparker]

@WHarris22 is right, with fullscreen="true" the menu grey square doesn't appear (because his behind the navbar...)

[royipressburger]

Alos seeing this with rc3 when focus on input

[aluknot]

Same here (when i open and close the menu) with rc3, the only workarounds for me was:

1) set overflow, overflow-y or overflow-x (depends on the situation) to auto

2)

::-webkit-scrollbar,
*::-webkit-scrollbar {
      display: none;
}

[jgw96]

Hello all! Are you guys still seeing this in RC4 ?

[ghenry22]

Yep it's back in RC4

[sryze]

I'm seeing this in 1.3.2 too (in a side menu). The scroll-content fix worked for me 👍

[LufoX11]

I'm facing this in 2.1.0 (fresh install). <ion-content fullscreen="true"> is a valid workaround in the meanwhile btw... Any real fix regarding this issue would be very much appreciated. Thanks

[chandanch]

It does not happen for the right side menu

[peterpeterparker]

For the record, Ionic 2.3.0, our grey square friend is still displayed.
To avoid it I continue to use the fullScreen attribute of the content.

[AlvaroHerrero]

In ionic 1.3.3 I have removed the grey square with this css:

ion-content{
overflow: auto;
}

::-webkit-scrollbar, *::-webkit-scrollbar {
display: none;
}

as suggested by @aluknot

[s3ppo]

in 3.0.1 i still can see it

[chandanch]

It occurs for the left side-menu

[jd0048]

i am facing same issue for grey square friend in ionic 2 please check attach screenshot it
ion-content{ overflow: auto; } ::-webkit-scrollbar, *::-webkit-scrollbar { display: none; }
this solutions work but it will hide scroll bar to throughout project so thats why its not help full for me

Please fix asap for grey square friend!!!

[Langstra]

@jgw96 Unfortunately I am also experiencing this one. I updated the framework to the latest version.
At first it is not there. However, after opening and closing the menu once it is there. I see this on Android 7.1.2.
Also here is ionic info.
global packages:

@ionic/cli-utils : 1.4.0
Cordova CLI      : 7.0.0 
Ionic CLI        : 3.4.0

local packages:

@ionic/app-scripts              : 1.3.7
@ionic/cli-plugin-cordova       : 1.4.0
@ionic/cli-plugin-ionic-angular : 1.3.1
Cordova Platforms               : android 6.1.2 browser 4.1.0
Ionic Framework                 : ionic-angular 3.4.2

System:

Node       : v7.3.0
OS         : Linux 4.10
Xcode      : not installed
ios-deploy : not installed
ios-sim    : not installed
npm        : 4.6.1

[chandanch]

Its occurring for the left side menu

[cgaeking]

As soon as I tap on the main content screen it appears. Using ioinic framework 3.4.2 as well.

[h1ghland3r]

Bug is still here in Ionic 3.4.0..

[trebor678]

+1

[LufoX11]

Still happening in 3.4.2 :(

[nrcrabbe]

Happening for me in 3.4.1 for both the left _and right_ side menu. Only when the content doesn't require a scroll.

It is definitely a part of div.scroll-content as you can set top: 20px !important and watch it move down next time.

I set a long async list and it appeared while the list was unpopulated and then disappeared as soon as the async call returned and the list was populated.

[tintucraju]

Happening for me too in 3.4.1 for left side menu.

For the time being i have tried the following and fixed.

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

[neguso]

It's happening also in 3.5.0

[rubenheymans]

@WHarris22 I think its .scroll-content

[YasirSherzad]

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

[gardziej]

Still in 3.12.0 :(

[vksgautam1]

it is still

[muhlenbrock]

Esto me funciono
<ion-content padding fullscreen="true">

[chandanch]

I tried this:
html <ion-menu class="full-width">...</ion-menu>
css .full-width { width: 50%; display: flex }

[gregor-srdic]

I am also noticing this in many of my ionic apps, even with the newest 3.7.1 version. Has anyone been able to solve it yet? It occurs just under the header (in the header shadow section). I am not using menu or tabs.

[rapideinternet]

Still there...

[ptitjes]

@brandyscarney Is there something preventing the resolution of this issue ?

From what I've read in https://github.com/ionic-team/ionic/pull/10431 and https://github.com/ionic-team/ionic/issues/6022#issuecomment-228110736, the overflow-y: scroll on scroll-content is only there to make ios users happy with momentum scrolling.

As said in https://github.com/ionic-team/ionic/issues/6022#issuecomment-279400592, this can be fixed in the following way:

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

Could we have that in 3.7.2 ? It is a bit annoying to have to have fixes like these in our stylesheets ?

[ricricucit]

I found this bug as well, in a totally unrelated project (not an ionic project)...and it's somehow appearing only when I'm using hammerjs (and only on Android mobile). Can somebody confirm this?

[bhumin3i]

still same issue please any one help me on this.

ionic info

@ionic/cli-utils  : 1.19.0
ionic (Ionic CLI) : 3.19.0

global packages:

cordova (Cordova CLI) : 8.0.0

local packages:

@ionic/app-scripts : 3.1.6
Cordova Platforms  : android 7.0.0
Ionic Framework    : ionic-angular 3.9.2

System:

Node : v8.9.2
npm  : 5.5.1
OS   : Windows 7

Environment Variables:

ANDROID_HOME : not set

Misc:

backend : legacy

[patwaswapnil]

Same issue 3.9.2

Solved using -

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

[marcusaaronb]

how to remove squire object once click my button. thank you

[johnbwoodruff]

@marcusaaronb That's the outline CSS property. Browsers have a default styling added. There's a lot of reasons to keep the outline, for example mentioned here: Stop Messing with the Browser's Default Focus outline

In terms of a native app, if you don't plan on having it accessible on the web but just from app stores, then you can get rid of it using the following:

:focus {
    outline: none;
}

[vksgautam1]

In ionic 4 aplha 2 also have same found this issue since ionic 2

[Hanzofm]

This problem still happening on ionic 3.9.2

`
ionic info

cli packages: (/usr/local/lib/node_modules)

@ionic/cli-utils  : 1.19.2
ionic (Ionic CLI) : 3.20.0

global packages:

cordova (Cordova CLI) : 8.0.0

local packages:

@ionic/app-scripts : 3.1.9
Cordova Platforms  : android 6.4.0
Ionic Framework    : ionic-angular 3.9.2

System:

Android SDK Tools : 26.1.1
ios-deploy        : 1.9.2 
ios-sim           : 6.1.2 
Node              : v9.9.0
npm               : 5.7.1 
OS                : macOS High Sierra
Xcode             : Xcode 9.3.1 Build version 9E501

Environment Variables:

ANDROID_HOME : /Users/user/Library/Android/sdk

Misc:

backend : pro

`

Workaround proposed by @patwaswapnil works like a charm

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

[ionitron-bot[bot]]

Thanks for the issue! We have moved the source code and issues for Ionic 3 into a separate repository. I am moving this issue to the repository for Ionic 3. Please track this issue over there.

Thank you for using Ionic!

[ionitron-bot[bot]]

Issue moved to: https://github.com/ionic-team/ionic-v3/issues/88