Свойство CSS3 webkit-overflow-scrolling: touch ERROR

iOS 5 выпустила веб-дизайнеров новое свойство -webkit-overflow-scrolling:touch, которое использует аппаратный ускоритель устройств iOS для обеспечения прокрутки прокрутки для прокручиваемого div.

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

Следующий fiddle покажет вам, что он отлично работает

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

http://www.golfbrowser.com/courses/mill-ride/

Я не знаю, как это исправить http://www.golfbrowser.com/photo.PNG

ОТВЕТЫ

Ответ 1

Как отметил @relluf, применение трехмерных переходов на относительном элементе исправляет ошибку. Тем не менее, я исследовал его немного дальше, и кажется, что применение -webkit-transform: translateZ(0px) тоже работает (это то, что Google делает в контейнере карт gmaps), и ему не нужно находиться на относительно позиционированном элементе, просто прямой потомок прокручиваемого элемента.

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

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

element > * {
    -webkit-transform: translateZ(0px);
}

Ответ 2

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

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

Ответ 3

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

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

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

Ответ 4

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

Ответ 5

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

Ответ 6

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

Ответ 7

В iOS, когда элемент внутри элемента с -webkit-overflow-scrolling: touch установлен абсолютно (или 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;
}

Ответ 8

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

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

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

* Сначала я использовал также -webkit-overflow-scrolling: auto, когда TouchDown, чтобы отключить рендеринг 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>