IOS overflow-x (или абсолютная позиция) делает прокрутку изменчивой?

Я хочу, чтобы моя веб-страница была только прокручиваемой по вертикали. Поэтому я установил overflow-x:hidden; в мой .page-wrapper. Мой .page-wrapper содержит два абсолютно расположенных слоя друг над другом. При нажатии кнопки верхний слой скользит в сторону (как упоминалось position:absolute;) и делает сайт на самом деле шире, чем 100% -ный видовой экран witdh, поэтому он будет прокручиваться по горизонтали.

Чтобы предотвратить горизонтальную прокрутку, я установил overflow-x:hidden в мой .page-wrapper.

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

Любые идеи, как это исправить?

UPDATE

-webkit-overflow-scrolling: touch;, кажется, работает нормально, так как ни один javascript не меняет высоты. См. Следующий пример. То, что я делаю здесь, - это обновление высоты тела до уровня содержимого второго слоя - поэтому нет свободного пространства прокрутки, когда верхний слой сдвинут влево. При перемещении верхнего слоя назад я удаляю атрибут style (который устанавливает высоту) из тела. После этого свиток снова перевернулся.

function showInfos(show) {

    if ( show ) {
        $('#videos').addClass('slid');
        $('body').height($('#infos > .content').height());
        $('#page-wrap').addClass('no-overflow');
    } else if ( !show ) {
        $('#videos').removeClass('slid');
        $('#page-wrap').removeClass('no-overflow');
        $('body').removeAttr('style');
    }
}

Ответ 1

Вы можете попробовать установить width:100% на .page-wrapper и установить это на overflow:hidden и position:relative. Это может помешать горизонтальной прокрутке.

Обновлено 10/12/2012

Спасибо за пример кода. Это действительно помогло мне увидеть ваши намерения и проблему с прокруткой более четко. Похоже, вам нужно - webkit-overflow-scrolling. Добавьте -webkit-overflow-scrolling: touch; в page-wrapper. Здесь применяется [обновленная тестовая страница] с этим правилом. Вы можете сравнить с тестовой страницей в моем комментарии ниже, чтобы увидеть разницу.

Ответ 2

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

* {
  -webkit-overflow-scrolling: touch;
}

Ответ 3

TL;DR; примените transform: translate3d(0px,0px,0px) к элементу и обертке.

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

Описанное здесь решение сработало для меня: https://css-tricks.com/forums/topic/mobile-safari-iphone-issue-with-position-fixed-content-running-over-the-top/

В принципе, как элемент, так и обертка элементов должны иметь стиль transform: translate3d(0px,0px,0px), тогда прокрутка прошла гладко. Для меня, не применяя его как к элементу, так и к обертке, исправление не работает.