Открытие мобильного меню в Chrome для Android путем установки ширины только в первый раз.

Question

Итак, я пытаюсь открыть мобильное меню слева, когда нажимается значок, и снова исчезает после нажатия за пределами меню. Например:
http://codepen.io/anon/pen/LzJuq (старый, см. Новый кодэпин ниже)

И он отлично работает на рабочем столе и в браузере по умолчанию Android.

На моем телефоне в Chrome меню открывается только в первый раз. Каждый последующий раз он закрывается, прежде чем он закончит открытие.

Я вижу, что он пытается открыть ... так что я предполагаю, потому что # menu-icon фактически находится в #content, он пытается запустить их обоих ... но я точно не знаю что делать.

Edit: Так я изменил его только вручную установить ширину вместо добавления/удаления класса, который определяет ширину: http://codepen.io/anon/pen/Bmdny
меню последовательно открывает сейчас, однако ссылки в меню, кажется, быть «прозрачным» при последующих открытиях. I.e, я вижу пустой фон меню, но ничего в/на нем, но я все еще могу щелкнуть ссылки. Если я увеличиваю масштаб, даже немного, он, похоже, заставит браузер перерисовать и появятся пункты меню.

Все, кажется, отлично работает в браузере по умолчанию Android, но не в Chrome для Android.

Я пробовал комментировать переходы css, чтобы не повлиять. Я попытался дать элементам меню z-index выше самого меню (я отчаянно, lol), без изменений.

Я просто не понимаю, что происходит.

Спасибо.

Информация:
Chrome для Android v32
Android 4,3
Samsung Galaxy Nexus

Answer 1

После долгих поисков, тонкой настройки, и таскание за волосы я начал сужать проблему вниз к наличию переполнения: скрытый; в моем меню.

Я столкнулся с несколькими случайными сообщениями из разных источников, которые описывали проблему, похожую на мою, и всегда были предложения, что она имеет какое-то отношение к свойству переполнения, но сначала я не понял.

Я «скрывал» меню, установив ширину: 0 ;, поэтому для того, чтобы скрыть содержимое, мне пришлось установить переполнение: hidden ;. Если бы я прокомментировал эту строку, меню открылось плавно и последовательно, но, конечно же: я мог видеть пункты меню все время. Не то, что я хотел.

Я попытался перевести свойство отображения, чтобы узнать, что вы не можете этого сделать. Поэтому я попробовал свойство видимости, и сначала это тоже не сработало. Тем не менее, я столкнулся с this post от парня, пытающегося перейти на дисплей, и this answer оказался для меня.

Я до сих пор не понимаю, почему именно это работает, я думаю, что это что-то делать с задерживая второй переход, так что не остановить первый ... Here's the article он связал в своем ответе.

Так что, я думаю, проблема действительно имела какое-то отношение к Webkit и фиксированным/абсолютным элементам с ними в них ... не перекрашивая после определенных ... щелчков тега привязки? Или переходы? Да, я до сих пор не понимаю. Но он работает сейчас!

Answer 2

Что навигатор вы испытывать его? Я не могу воспроизвести ошибку на моем телефоне или планшете. Однако, кажется, что, когда кнопка находится над div #content, когда вы нажимаете на нее, вы щелкаете обоими элементами.

Попробуйте удалить класс только тогда, когда в меню есть это:

$("#content").bind("click", function() { 
    if ($('#mobile-menu').hasClass('open')) 
     $('#mobile-menu').removeClass('open'); 
}); 

EDIT

Давайте попробуем поставить промежуточный слой между меню и содержанием. Давайте свяжем событие закрытия меню с этим слоем.

Посмотрите на это: http://codepen.io/anon/pen/jiyHI