Deslocamento de um único dedo no Safari não renderizando html até que a rolagem termine - javascript, jquery, css, webkit, mobile-safari

Em um aplicativo da web móvel, tenho uma div quepode ser rolado com a nova fantasia -webkit-overflow-scrolling: touch. O único problema é que o conteúdo está sendo renderizado somente quando a rolagem termina. Existe uma maneira de fazer o Mobile Safari (e talvez outros navegadores móveis, como o Android) renderizarem o html durante a rolagem com um dedo?

.layer-content {
position: absolute;
top: 112px;
bottom: 0;
width: 100%;
background: #e6e6e6;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}

Respostas:

Na verdade não. É assim que o iPhone funciona. Se você rolar, todos os recursos serão utilizados para tornar a rolagem muito suave, às custas de não mostrar as novas peças. Talvez você possa fazer o navegador pensar que a camada é maior, aumentando-a e adicionar uma camada sobre a parte que você não deseja exibir, mas isso não funciona para todos os layouts. Eu apenas deixaria como estava. Os usuários estão acostumados, pois as páginas normais têm o mesmo "problema de renderização".

Você pode contornar isso usando a aceleração de hardware. Tente adicionar o seguinte CSS aos elementos dentro .layer-content:

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

A posição: absoluto está mexendo com a renderização. O Mobile Safari não renderizará elementos que não tenham o valor padrão para posicionamento, até que a rolagem pare.

Se a posição for automática (o valor padrão), o Mobile Safari renderizará o elemento à medida que você rola.

Tenho certeza que acabei de resolver isso com:

overflow-y: auto;

Adicione isso ao seu elemento de rolagem.

(Presumivelmente apenas overflow: auto; funcionaria muito, dependendo de suas necessidades.)