Использование '-webkit-overflow-scrolling: touch' скрывает содержимое при прокрутке/перетаскивании

поскольку заголовок говорит, что у меня проблема с контентом, скрывающимся при прокрутке/перетаскивании содержимого при использовании свойства CSS -webkit-overflow-scrolling: touch.

Для базового понимания, вот моя разметка

<div class="page">
   <div class="section_title">Title</div>
   <div class="items">
      <div class="item">...Text and Image...</div>
      <div class="item">...Text and Image...</div>
      <div class="item">...Text and Image...</div>
   </div>
   <div class="section_title">Title</div>
   <div class="items">
      <div class="item">...Text and Image...</div>
      <div class="item">...Text and Image...</div>
      <div class="item">...Text and Image...</div>
   </div>
</div> 

И CSS:

.page {
    width: 320px;
    height: 366px;
    overflow: scroll;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

Сам код работает хорошо, я могу прокручивать содержимое, но все, что находится внутри элемента div, скрывается, пока я прокручиваю/перетаскиваю. Кто-нибудь столкнулся с этой проблемой и решил ее или это просто стандартное поведение Mobile Safari для экономии памяти, и мы ничего не можем с этим поделать?

Любая помощь приветствуется: -)

Ответы

Ответ 1

Вы пытались поместить элементы в память?

Если нет, попробуйте поместить .items в память, используя css -webkit-transform: translate3d(0,0,0);

В зависимости от производительности вы можете пойти выше или ниже в зависимости от производительности, то есть применить перевод на .page или .item. Это увеличит используемую память, которая может стать катастрофичной, но она поможет браузеру перерисовать все.

В любом случае, надеюсь, что это поможет!

Ответ 2

Это, вероятно, связано с ошибкой в ​​webkit. Если у вас есть "позиция: относительная" или абсолютная, ваш код должен работать нормально.