Переполнение-x: скрыто; не работает на устройствах Android

Я пришел к выводу, что это проблема только с андроидом, вызванная тем, как работает мое навигационное меню, и у меня заканчивается идея попробовать. Меню сместится на 100% слева, чтобы скрыть меню. Затем я использую css-переходы, чтобы меню выходило с правой стороны на 80% окна. Когда меню переключается, он оставляет открытое и пустое пространство в правой части, где скрывается меню. Я не могу использовать display: none; так как он убьет анимацию. Важно. Проблема возникает только после переключения меню.

Я пробовал:

SO Q1
SO Q2
SO Q3
SO Q4
переполнение на теле, html, wrapper,.searchCont и многое другое.

Обновление 2/6/2014

Вот меню навигации css:

ul.subNav {
    position: absolute;
    top: 70px;
    left: 100%;
    transition: all 0.6s ease;
    -webkit-transition: all 0.6s ease;
    -moz-transition: all 0.6s ease;
    -ms-transition: all 0.6s ease;
    visibility: hidden;
    width: 80%;
    background: #f7f7f7;
    border-left: 5px solid #00529f;
    z-index: 100;
}

Окончательное обновление

Вот css:

.wrapper {
    max-width: 100%;
    height: 100%;
    background: #20aad7;
    background: url("../images/bg.png"), -moz-linear-gradient(-45deg, #20aad7 0%, #54709f 31%, #64b491 65%, #047074 100%);
    background: url("../images/bg.png"), -webkit-gradient(linear, left top, right bottom, color-stop(0%,#20aad7), color-stop(31%,#54709f), color-stop(65%,#64b491), color-stop(100%,#047074));
    background: url("../images/bg.png"), -webkit-linear-gradient(-45deg, #20aad7 0%,#54709f 31%,#64b491 65%,#047074 100%);
    background: url("../images/bg.png"), -o-linear-gradient(-45deg, #20aad7 0%,#54709f 31%,#64b491 65%,#047074 100%);
    background: url("../images/bg.png"), -ms-linear-gradient(-45deg, #20aad7 0%,#54709f 31%,#64b491 65%,#047074 100%);
    background: url("../images/bg.png"), linear-gradient(135deg, #20aad7 0%,#54709f 31%,#64b491 65%,#047074 100%);
    background-repeat: repeat;
    overflow-x: hidden;
}

Наконец, вот сайт fiddle/live: Демо-скрипт/Демо-живой сайт

Вот изображение проблемы:

Ответ 1

Мы боролись с той же проблемой с моим другом (как выясняется, @user3310612:)) на работе последние пару дней. Absolutelly не мог понять, почему КАЖДЫЙ способ перемещения меню вправо (особенно преобразование, которое не должно влиять на макет) сделал страницу прокручиваемой прямо на Android.

Сегодня, увидев сообщения, которые overflow-x не работает на Android, я просто случайно спросил: "Что произойдет, если вы используете только overflow:hidden. Ожидания - правое меню обрезается, но, возможно, также разбито страница и разбивается/убывает прокрутка. Реальность - работает безупречно.

Итак, для нас overflow:hidden на самом верхнем #container решила проблему. 20 минут назад:)

Ответ 2

Ran в ту же проблему, применение overflow-x: скрытое к html и телу ничего не делало в Android. Поместите контейнер div внутри вашего тела и оберните все на странице. Добавьте переполнение-x: спрятано в этот контейнер div, и проблема решена.

Ответ 3

Я нашел один вариант, который работает сейчас. (Оставит без отметки для получения более качественных ответов)

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

Это устранило мою проблему только из-за position: fixed;, поскольку она вывела весь элемент из рабочего процесса, как если бы его там не было. Тогда тело не воспринимает элемент, чтобы быть там, чтобы вы больше не могли прокручивать вправо.

ul.subNav {
    position: fixed;
    top: 0;
    left: 100%;
    transition: all 0.6s ease;
    -webkit-transition: all 0.6s ease;
    -moz-transition: all 0.6s ease;
    -ms-transition: all 0.6s ease;
    visibility: hidden;
    width: 80%;
    height: 100%;
    background: #f7f7f7;
    border-left: 5px solid #00529f;
    z-index: 100;
}

ul.subNav.active {
    left: 20%;
    visibility: visible;
}

Ответ 4

Вам нужно

#wrapper {position:absolute;}

Ответ 5

Я думаю, ваша "проблема" исходит от visibility: hidden/ visible.

Как спецификация говорит: "hidden - созданный ящик невидимый (полностью прозрачный, ничего не нарисован), но все равно влияет на макет".

Попробуйте использовать

display: none|block;

вместо.

Или вы можете избежать всего этого, если вы нажмете меню за пределы экрана влево (а не вправо).

BTW: ссылка на ваш живой сайт не работает, и есть некоторые ошибки в вашей разметке HTML на JSFiddle (например, закрывающие теги </span>), а также ваш CSS имеет место для оптимизации.; -)

Ответ 6

Попробуйте заменить

overflow-x: hidden;

с overflow: hidden;

У меня была такая же проблема, и это сработало для меня.

Ответ 7

У меня была такая же проблема, и я как бы объединил несколько ответов здесь, поэтому спасибо всем за ваш вклад! Вот что я сделал:

body{ 
    overflow-x:hidden; 
}
.menu{
    position: fixed;
    z-index: 1;
    width: 340px;
    max-width: 85%;
    top: 0px;
    right: -340px;
}
.menu.open{ 
    right:0; 
    position:absolute; 
}

Настройка position:fixed;, казалось, сделала трюк, поэтому, когда я хотел открыть меню (и в моем случае позиция fixed была нежелательна), я установил его в absolute. Вы также можете, как упоминалось, переключить visibility или даже установить display:none. Это было проверено только на Chrome для Android.

Ответ 8

У меня была такая же проблема на Android при работе над ионным проектом. Для решения проблемы я поставил {overflow-x:hidden} на дочерние элементы.