Korzystanie z funkcji "-webkit-overflow-scrolling: touch" powoduje ukrycie zawartości podczas przewijania/przeciągania

Question

, ponieważ tytuł mówi, że mam problem z ukrywaniem zawartości podczas przewijania/przeciągania zawartości podczas korzystania z właściwości CSS -webkit-overflow-scrolling: touch.

uzyskać podstawową wiedzę, tu jest mój znaczników

<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> 

I CSS:

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

Kod sama działa dobrze, mogę przewijać treść, ale wszystko, co znajduje się wewnątrz elementy div get są ukryte podczas przewijania/przeciągania. Ktoś natknął się na tę kwestię i rozwiązał ją, czy jest to standardowe zachowanie Mobile Safari, aby oszczędzać pamięć i nic na to nie możemy poradzić?

Każda pomoc jest mile widziana :-)

Answer 1

Czy próbowałeś umieszczenie elementów w pamięci?

Jeśli nie, spróbuj umieścić .items w pamięci za pomocą css -webkit-transform: translate3d(0,0,0);

Możesz iść wyższa lub niższa w zależności od wydajności gniazdowania, czyli nałożeniem przekłada się .strona lub .Item. Spowoduje to zwiększenie wykorzystywanej pamięci, co może doprowadzić do awarii, ale pomaga przeglądarce przerysować wszystko.

W każdym razie, mam nadzieję, że pomaga!

Answer 2

To prawdopodobnie ma związek z błędem w webkicie. Jeśli masz jakąkolwiek "pozycję: względną" lub bezwzględną, twój kod powinien działać poprawnie.