CSS3 свойство webkit-overflow-scrolling: коснитесь ОШИБКА

Question

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

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

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

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

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

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

Answer 1

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

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

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

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

Answer 2

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

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

Answer 3

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

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

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

Answer 4

В 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;
}

Answer 5

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

Answer 6

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

Answer 7

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

Answer 8

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

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

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

* Сначала я применил также -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>