问题的简短描述：
使用ionic start mem2 tutorial --v2创建的项目并在 android 5.1.1 设备上运行时。
当应用程序启动时：
当我切换菜单然后隐藏它时。 （注意汉堡菜单下的灰色方块）
你期待什么行为？
我希望图像看起来相同（注意汉堡菜单下的灰色方块）。
重现步骤：
ionic start mem2 tutorial --v2ionic run android- 左右滑动菜单/通过“切换菜单”按钮或汉堡菜单按钮切换菜单并向后滑动。 显然，每次运行应用程序时，该错误都不会出现。
当灰色方块出现时，似乎按下蓝色按钮使其消失。
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
vonovak
所有66条评论
啊好抓！ 我可以通过我们在 Android 5.1.1、Android 6.0.1 和 Android N dev preview 2 上的sidemenu启动器看到这一点。
jgw96
于 2016-05-03
我在使用 Ionic 1（德里及更高版本）时遇到了同样的问题。
MartineFrancken
于 2016-05-20
在 Ionic 2 beta 7 中 +1
WHarris22
于 2016-05-20
使用 chrome 调试器 Ionic 2 beta 7 时，平台：ios中也会出现 +1。
nyankobu010
于 2016-05-23
发现这只发生在内容没有溢出正在测试的特定屏幕尺寸时（当您无法滚动特定视图时）。 希望这可以帮助某人找到根本原因。
nyankobu010
于 2016-05-30
大家好，这已在我们的 beta.10 版本中得到修复。 如果您想早点试用，可以使用npm install ionic-angular@nightly每晚安装最新的 ionic 2。 此版本中有一些非常小的重大更改，我们将在发布时提供完整的升级说明，但最重要的是
<ion-navbar *navbar>
</ion-navbar>
应该改成这个
<ion-header>
<ion-navbar>
</ion-navbar>
</ion-header>
感谢您使用离子！
jgw96
于 2016-06-27
用最新的每晚再次看到这个问题。 重新开放以进行更多调查。
jgw96
于 2016-06-27
完全一样的问题。
lordgreg
于 2016-06-29
团队注意事项：对此进行了一些调试并得到了一些非常奇怪的结果。 如果您使用 chrome 开发工具检查页面，那么小灰色方块似乎不在 dom 中。
jgw96
于 2016-06-30
我仍然在 ios 和 android 设备上看到带有 beta10 的灰色小方块
ghenry22
于 2016-07-07
它也在 ionic 1.3 上重现。
空列表中的小灰色框。 当我尝试更改任何样式的内容（在 chrome 开发工具中）时 - 盒子不见了，即使我恢复了我的更改......这真的很奇怪......
tarasok
于 2016-07-11
当我在 chrome 开发工具中玩耍时，我注意到了两件事，但两者都没有真正帮助找到它的原因，但可以帮助 DOM 位置（ ion-header或scroll-content或我的测试可能都是错的！）。
首先，如果您取消选中ion-header元素属性position: absolute;标题会返回到position: static;隐藏标题和ion-content后面的灰色方块，因为这样元素是 100% 的高度和宽度。 所以这一定意味着它与ion-header元素有关，对吧？
其次，我还注意到，如果你将属性margin-top:56px;增加到 ion-content 内的ion-content scroll-content元素上的 100px，这会导致正方形进一步向下移动屏幕。
因此，两个不同的东西似乎会影响灰色方块，但它们不是子元素或父元素，它们彼此更兄弟/相邻。 嗯嗯
注意：更改 chrome 检查器中的值会导致正方形消失，因此您必须再次打开和关闭菜单才能查看它重新定位的位置。
WHarris22
于 2016-07-28
我想我已经得出结论，它是scroll-content元素的滚动条！！
在scroll-content元素上，如果您将overflow-y: scroll;更改为overflow-y:auto;它将摆脱它。 而且，如果您将overflow-x: hidden;更改为oveflow-x:scroll; ，由于垂直和水平滚动条重叠，灰色方块会略有变化：)
所以我认为正确的修复（对我有用）是
scroll-content{
overflow-y: auto;
}
不确定这是否会导致其他任何东西损坏
WHarris22
于 2016-07-28
当您执行以下操作时，似乎使正方形消失的其他事情
<ion-content fullscreen="true">
我希望这些信息有助于实施修复
WHarris22
于 2016-08-01
我开始在 beta11 中看到这个比在 beta8 中更频繁
kodeine
于 2016-08-08
你好！ 很高兴地报告我不能再用最新的每晚重现这个问题。 因此，我将暂时关闭此问题。 感谢您使用离子！
jgw96
于 2016-08-22
@jgw96请重新打开，错误又出现了。
laserus
于 2016-10-19
@jgw96我在模态页面（.modal-wrapper）中出现了这个问题。 我在 .scroll-content 上使用 overflow-y:auto 修复了它。 发生在 Android 设备上，而不是桌面 chrome。
版本：2.0.0-rc.1-201610191717（小偷）
filipsuk
于 2016-10-25
@jgw96我也得到了 rc1 中的方框。
kodeine
于 2016-10-25
也在rc1中得到这个
ghenry22
于 2016-10-25
@jgw96在 rc1 中也发生在我身上。
johnbwoodruff
于 2016-10-25
就我而言，只有当我有输入并且这些没有占位符时才会发生这种情况......
ibonkonesa
于 2016-10-27
离子内容全屏=“真”
在rc1上修复它
felipeands
于 2016-10-28
@felipeands这不是修复，可能灰色框在导航栏后面.... =）
laserus
于 2016-10-31
这也发生在我的 ionic 1.3.2 上。 也可以为 ionic v1 实施修复吗？
我尝试了设置的建议.scroll-content{
overflow-y: auto;
}
当您的主要内容显示时，这似乎可以解决它，但是，当我打开左侧菜单时，它会再次出现。
编辑：似乎上面的css确实在ionic v1上修复了它......忽略我关于它在菜单打开时出现的声明。 由于某种原因，我的 sass 手表没有运行。
gregvis
于 2016-11-09
rc2 中的同样问题
aggarwalankush
于 2016-11-10
@WHarris22是对的，使用 fullscreen="true" 菜单灰色方块不会出现（因为他在导航栏后面......）
peterpeterparker
于 2016-11-19
当专注于输入时，Alos 用 rc3 看到了这一点
royipressburger
于 2016-11-30
与 rc3 相同（当我打开和关闭菜单时），对我来说唯一的解决方法是：
1) 将overflow 、 overflow-y或overflow-x （视情况而定）设置为auto
2)
::-webkit-scrollbar,
*::-webkit-scrollbar {
display: none;
}
aluknot
于 2016-12-11
大家好！ 你们还在 RC4 中看到这个吗？
jgw96
于 2016-12-29
是的，它又回到了 RC4
ghenry22
于 2016-12-31
我也在 1.3.2 中看到了这一点（在侧面菜单中）。 scroll-content修复对我有用👍
sryze
于 2017-01-09
我在 2.1.0（全新安装）中面临这个问题。 同时， <ion-content fullscreen="true">是一种有效的解决方法...任何有关此问题的真正解决方法将不胜感激。 谢谢
LufoX11
于 2017-03-03
右侧菜单不会发生这种情况
chandanch
于 2017-03-11
作为记录，Ionic 2.3.0，我们的灰色方形朋友仍然显示。
为了避免这种情况，我继续使用内容的 fullScreen 属性。
peterpeterparker
于 2017-03-28
在 ionic 1.3.3 中，我用这个 css 删除了灰色方块：
离子含量{
溢出：自动；
}
::-webkit-scrollbar, *::-webkit-scrollbar {
显示：无；
}
正如@aluknot所建议的那样
AlvaroHerrero
于 2017-04-13
在 3.0.1 中我仍然可以看到它
s3ppo
于 2017-04-25
它发生在左侧菜单中
chandanch
于 2017-04-26
我在 ionic 2 中遇到灰色方形朋友的同样问题，请检查附上截图ion-content{
overflow: auto;
}
::-webkit-scrollbar, *::-webkit-scrollbar {
display: none;
}
这个解决方案有效，但它会将滚动条隐藏到整个项目中，这就是为什么它对我没有帮助
灰色方块的朋友请尽快修复！！！
jd0048
于 2017-06-12
@jgw96不幸的是，我也遇到了这个问题。 我将框架更新到最新版本。
起初它不存在。 但是，在打开和关闭菜单后。 我在 Android 7.1.2 上看到了这个。
这里还有离子信息。
全局包：
@ionic/cli-utils : 1.4.0
Cordova CLI : 7.0.0
Ionic CLI : 3.4.0
本地包：
@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
系统：
Node : v7.3.0
OS : Linux 4.10
Xcode : not installed
ios-deploy : not installed
ios-sim : not installed
npm : 4.6.1
Langstra
于 2017-06-17
它发生在左侧菜单中
chandanch
于 2017-06-19
一旦我点击主内容屏幕，它就会出现。 也使用 ioinic 框架 3.4.2。
cgaeking
于 2017-06-21
Ionic 3.4.0 中仍然存在错误。
h1ghland3r
于 2017-06-23
+1
trebor678
于 2017-06-23
3.4.2 中仍在发生 :(
LufoX11
于 2017-06-23
左侧和右侧菜单在 3.4.1 中发生在我身上。 仅当内容不需要滚动时。
它绝对是div.scroll-content的一部分，因为您可以设置top: 20px !important并观察它下次向下移动。
我设置了一个长的异步列表，它在列表未填充时出现，然后在异步调用返回并填充列表时立即消失。
nrcrabbe
于 2017-06-28
在左侧菜单的 3.4.1 中也发生在我身上。
暂时我已经尝试了以下并修复了。
.滚动内容{
溢出-y：自动！重要；
}
tintucraju
于 2017-07-12
它也在 3.5.0 中发生
neguso
于 2017-07-22
@WHarris22我认为它的 .scroll-content
rubenheymans
于 2017-07-26
它也在 3.6.0 中发生......它在关闭键盘然后单击内容后出现，方块出现在每个有输入并需要打开键盘的页面中。 这以前没有发生
YasirSherzad
于 2017-08-30
还在 3.12.0 :(
gardziej
于 2017-09-22
它还是
vksgautam1
于 2017-09-29
这对我有用<ion-content padding fullscreen="true">
muhlenbrock
于 2017-09-30
我试过这个：
html
<ion-menu class="full-width">...</ion-menu>
css
.full-width {
width: 50%;
display: flex
}
chandanch
于 2017-10-02
我在我的许多 ionic 应用程序中也注意到了这一点，即使是最新的 3.7.1 版本。 有没有人能够解决它？ 它出现在标题下方（在标题阴影部分中）。 我没有使用菜单或标签。
gregor-srdic
于 2017-10-05
还在那里...
rapideinternet
于 2017-10-18
@brandyscarney有什么东西阻止了这个问题的解决吗？
根据我在https://github.com/ionic-team/ionic/pull/10431和https://github.com/ionic-team/ionic/issues/6022#issuecomment -228110736 中阅读的内容， overflow-y: scroll $ scroll-content overflow-y: scroll只是为了让 ios 用户对动量滚动感到满意。
如https://github.com/ionic-team/ionic/issues/6022#issuecomment -279400592 中所述，可以通过以下方式修复：
.content .scroll-content {
overflow-y: auto;
}
.content-ios .scroll-content {
overflow-y: scroll;
}
我们可以在 3.7.2 中拥有它吗？ 在我们的样式表中必须有这样的修复有点烦人？
ptitjes
于 2017-10-23
我也在一个完全不相关的项目（不是一个离子项目）中发现了这个错误......并且它仅在我使用hammerjs时才出现（并且仅在Android手机上）。 有人可以证实这一点吗？
ricricucit
于 2017-10-24
仍然是同样的问题，请任何人帮助我。
离子信息
@ionic/cli-utils : 1.19.0
ionic (Ionic CLI) : 3.19.0
全局包：
cordova (Cordova CLI) : 8.0.0
本地包：
@ionic/app-scripts : 3.1.6
Cordova Platforms : android 7.0.0
Ionic Framework : ionic-angular 3.9.2
系统：
Node : v8.9.2
npm : 5.5.1
OS : Windows 7
环境变量：
ANDROID_HOME : not set
杂项：
backend : legacy
bhumin3i
于 2018-01-09
同样的问题 3.9.2
使用解决 -
.scroll-content{
overflow-y:auto !important;
}
patwaswapnil
于 2018-02-08
单击我的按钮后如何删除 squire 对象。 谢谢
marcusaaronb
于 2018-04-23
@marcusaaronb那是outline CSS 属性。 浏览器添加了默认样式。 保留大纲有很多原因，例如这里提到的： Stop Messing with the Browser's Default Focus outline
对于本机应用程序，如果您不打算在网络上访问它，而只是从应用程序商店访问它，那么您可以使用以下方法摆脱它：
:focus {
outline: none;
}
在 ionic 4 aplha 2 中也发现了这个问题，因为 ionic 2
vksgautam1
于 2018-04-30
这个问题仍然发生在 ionic 3.9.2
`
离子信息
cli 包：（/usr/local/lib/node_modules）
@ionic/cli-utils : 1.19.2
ionic (Ionic CLI) : 3.20.0
全局包：
cordova (Cordova CLI) : 8.0.0
本地包：
@ionic/app-scripts : 3.1.9
Cordova Platforms : android 6.4.0
Ionic Framework : ionic-angular 3.9.2
系统：
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
环境变量：
ANDROID_HOME : /Users/user/Library/Android/sdk
杂项：
backend : pro
`
@patwaswapnil提出的解决方法就像一个魅力
.滚动内容{
溢出-y：自动！重要；
}
Hanzofm
于 2018-06-14
谢谢你的问题！ 我们已将 Ionic 3 的源代码和问题移至单独的存储库中。 我正在将此问题移至 Ionic 3 的存储库。请在此处跟踪此问题。
感谢您使用离子！
![ionitron-bot[bot] picture](https://avatars1.githubusercontent.com/in/8640?v=4&s=40)
ionitron-bot[bot]
于 2018-11-01
问题移至： https ://github.com/ionic-team/ionic-v3/issues/88
ionitron-bot[bot]
于 2018-11-01
相关问题
brandyscarney
·
3评论
danbucholtz
·
3评论
MrBokeh
·
3评论
daveshirman
·
3评论
GeorgeAnanthSoosai
·
3评论
最有用的评论
当您执行以下操作时，似乎使正方形消失的其他事情
<ion-content fullscreen="true">我希望这些信息有助于实施修复