CSS3 свойство webkit-переполнение-прокрутка: ошибка касания

какой Жук они выпустили здесь. Пробовал всевозможные обходные пути, пока я, наконец, не нашел единственное свойство, необходимое для правильного отображения элементов в -webkit-overflow-scrolling:touch div:position: static

относительные и абсолютные позиционированные элементы всегда отрезаны на границе и полностью отсутствуют (за исключением пустого пространства) за ее пределами. При динамическом изменении свойства position со статического на абсолютное сохраняется только видимая часть прокручиваемого окна просмотра div визуализируется, где бы ни было смещение.

Я также столкнулся с этой ошибкой. Я исправил это, применив следующий css к родительским элементам:

-webkit-transform: translate3d(0, 0, 0);

однако я заметил, что это замедляет рендеринг и может выбрать другие элементы ввода, чем требуется, когда сенсорный элемент ввода прокручивается в центр представления (Safari/iOS).

Я глубоко исследовал эту ошибку, я также создал jsfiddle и представил его в Apple отчет об ошибке. Пожалуйста, смотрите: изображения iOS5 исчезают при прокрутке с помощью webkit-overflow-scrolling: touch Как только Apple ответит мне, я сообщу об этом на эту тему, чтобы вы могли оставаться в курсе этой очень раздражающей ошибки

Я также испытал проблему, когда переполнение прокрутки с помощью-webkit-overlfow-scrolling set to touch привело к проблемам перерисовки с расположенными элементами. В моем случае у меня был список, где отдельные элементы имели относительное позиционирование, чтобы я мог использовать позиционирование на своих дочерних элементах. С вышеуказанным CSS на iOS 5, когда пользователь прокручивал скрытый контент в поле зрения, была мгновенная задержка, прежде чем он перерисовал экран для просмотра элементов. Это действительно раздражало. К Счастью, Я обнаружьте, что если я также дал относительное положение родительского узла, это было решено.

в iOS, когда элемент внутри элемента с -webkit-overflow-scrolling: touch set позиционируется абсолютно (или fixed) относительно элемента вне контейнера прокрутки, элемент отображается только один раз, и рендеринг не обновляется при прокрутке элемента. Пример HTML:

<div class="relative-to-me">
  <div class="scrollable">
    <div class="absolutely-positioned">
    </div>
  </div>
</div>

если вы принудительно рендерите, изменив свойство CSS (например, в инспекторе), вы можете увидеть, что позиционирование элемента повторно отображается в правильном месте. Я подозреваю, что это результат некоторых функций производительности для оптимизации производительности прокрутки.

решение этой проблемы состоит в том, чтобы установить will-change: transform на абсолютно (или фиксированном) позиционированном элементе.

.absolutely-positioned {
    will-change: transform;
}

ошибка все еще живет в iOS 6. Если ваша проблема связана с position: relative, вы можете решить эту проблему, устанавливая z-index: 1 временно через JS. -webkit-transform: translate(...) не работает с position: relative в моем случае.

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

наконец-то я нашел способ отлично работает с jQuery:

применить-webkit-переполнение-прокрутка свойство каждый раз, когда вы касаетесь.

*сначала я применил также - webkit-overflow-scrolling: auto, когда гол, чтобы отключить рендеринг iOS. Но это заставило Пейджа моргнуть. Поэтому я бросил его, а затем отлично работает удивительно!

Проверьте строки ниже, надеюсь, что это поможет:

<!--  JQuery Functions-->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">

// Apply -webkit-overflow-scrolling in Every TouchEnd
$(document).on('click touchend', function(event) {
    $("#TestDIV").css({"-webkit-overflow-scrolling":"touch"});
});

</script>



<!--  html Elements & Style -->

<div id="TestDIV">
    <div class="Element"></div>
    <div class="Element"></div>
    <div class="Element"></div>
    <div class="Element"></div>
    <div class="Element"></div>
</div>

<style>
#TestDIV{
    white-space: nowrap;
    overflow-x: scroll;
    -webkit-overflow-scrolling:touch;
}

#TestDIV .Element{
    width:300px;
    height:300px;

    margin: 2px;

    background-color: gray;

    display: inline-block;
}
#TestDIV .Element:nth-child(odd){
    background-color: whitesmoke;
}   
</style>