在Chrome（Android版）中通过设置宽度只打开移动菜单第一次。 [英] Opening mobile menu in Chrome for Android by setting width only works first time.

问题描述

因此，我想要一个移动菜单，当点击图标时，它会在左侧滑出，并在点击菜单后再次消失。像这样：

http://codepen.io/anon/pen/LzJuq

So I'm trying to have a mobile menu that slides out on the left when an icon is clicked, and disappears again after you click outside the menu. Like this:
http://codepen.io/anon/pen/LzJuq (old, see new codepen below)

它可以在桌面和Android的默认浏览器中正常工作。

And it works fine on desktop and in Android's default Browser.

在我的手机上，在Chrome中，菜单只会第一次打开。随后每次它在完成打开之前关闭。

On my phone, in Chrome, the menu will only open the first time. Each subsequent time it closes itself before it finishes opening.

我可以看到它尝试打开...所以我假设，因为＃menu-icon实际上在#content内，它尝试运行它们...但我不知道该怎么做。

I can see that it tries to open... so I assume, because the #menu-icon is actually within the #content, it tries to run them both... but I don't exactly know what to do.

编辑将其更改为仅手动设置宽度，而不是添加/删除指定宽度的类： http：/ /codepen.io/anon/pen/Bmdny

菜单一直打开，但菜单中的链接在后续打开时似乎是透明的。即，我看到菜单的空白背景，但没有在/它，但我仍然可以单击链接。如果我放大，即使只是一点点，似乎强制浏览器重绘，菜单项出现。

So I've changed it to just manually set the width instead of adding/remove a class that specifies the width: http://codepen.io/anon/pen/Bmdny
The menu consistently opens now, however the links in the menu seem to be 'transparent' on subsequent opens. I.e, I see the blank background of the menu, but nothing in/on it, but I can still click the links. If I zoom in, even just a little bit, it seems to force the browser to repaint and the menu items appear.

一切似乎在Android的默认浏览器，只是没有在Chrome for Android。

Everything seems to work fine in Android's default browser, just not in Chrome for Android.

我已尝试注释掉css转换，没有效果。我试着给菜单项目一个z-index高于菜单本身（我绝望，lol），没有改变。

I've tried commenting out the css transitions, to no effect. I've tried giving the menu items a z-index higher than the menu itself (I'm desperate, lol), no change.

我只是不明白发生了什么。

I just don't understand what's going on.

感谢。

信息：
for Android v32

Android 4.3

Samsung GalaxyNexus└

Info:
Chrome for Android v32
Android 4.3
Samsung Galaxy Nexus

推荐答案

经过大量的搜索，调整和头发拉我开始把问题缩小到有overflow：hidden;在我的菜单上。

After much searching, tweaking, and hair pulling I began to narrow the problem down to having overflow:hidden; on my menu.

我遇到了各种来源的一些随机的帖子描述了一个类似我的问题，并总是有建议，它有关的overflow属性，但是最初我不明白。

I came across a few random posts of various sources that described a problem similar to mine, and there were always suggestions that it had something to do with the overflow property, but at first I didn't understand.

我通过设置width：0;'隐藏'菜单，所以为了隐藏内容，我不得不设置overflow：hidden;如果我评论了排队，菜单打开流畅和一致，但当然：我可以看到菜单项一直。不是我想要的。

I was 'hiding' the menu by setting width:0;, so in order to hide the content as well, I had to set overflow:hidden;. If I commented that line out, the menu opened fluidly and consistently, but of course: I could see the menu items all the time. Not what I wanted.

我试图过渡显示属性，以了解你不能这样做。所以我试图visibility属性，起初，没有工作。但是，我遇到了 此信息 以转换显示属性，并且 此答案 适用于我。

I tried transition the display property to learn that you can't do that. So I tried the visibility property, and at first that didn't work either. However, I came across this post from a guy trying to transition the display property, and this answer happened to work for me.

我仍然不明白为什么这个工作，我认为它有关延迟第二个转换，所以它不停止第一个... 这是他在回答中链接的文章 。

I still don't understand exactly why this works, I think it has something to do with delaying the second transition so it doesn't stop the first... Here's the article he linked in his answer.

所以我想这个问题真的有一些与Webkit和固定/绝对的元素与ul的在他们...不重新绘制某些...锚标签点击后？还是过渡？是的，我还是不太明白。但它现在工作！

So I guess the problem really had something to do with Webkit and fixed/absolute elements with ul's in them... not repainting after certain... anchor tag clicks? Or transitions? Yeah, I still don't really understand. But it works now!

这篇关于在Chrome（Android版）中通过设置宽度只打开移动菜单第一次。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！