CSS3 propiedad webkit-desbordamiento-desplazamiento: error táctil

Qué cabrón sueltan aquí. Probé todo tipo de soluciones hasta que finalmente encontré la única propiedad necesaria para que los elementos se representen correctamente en un div -webkit-overflow-scrolling:touch: position: static

Los elementos posicionados relativos y absolutos siempre se cortan en el límite, y faltan completamente (excepto el espacio vacío) fuera de él. Si cambia la propiedad position dinámicamente, de estática a absoluta, solo la parte visible de la vista div desplazable permanece renderizada, offset pasa a ser.

También me he encontrado con este error. Lo arreglé aplicando el siguiente css a los elementos principales:

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

Sin embargo, he notado que eso ralentiza el renderizado y podría seleccionar otros elementos de entrada que los deseados cuando un elemento de entrada tocado se desplaza hacia el centro de la vista (por Safari/iOS).

Investigué profundamente este error, también creé un jsfiddle y lo envié a Apple en un informe de error. Por favor vea: Las imágenes de iOS5 desaparecen al desplazarse con webkit-overflow-scrolling: touch Tan pronto como Apple me responda, lo informaré sobre ese tema para que pueda mantenerse al día sobre este error muy molesto

También experimenté el problema donde el desplazamiento de desbordamiento con-webkit-overlfow-scrolling configurado para tocar resultó en problemas de redibujo con elementos posicionados. En mi caso, tenía una lista donde los elementos individuales tenían un posicionamiento relativo para que pudiera usar el posicionamiento en sus elementos hijos. Con el CSS anterior en iOS 5, cuando el usuario desplazó el contenido oculto a la vista, hubo un retraso momentáneo antes de volver a dibujar la pantalla para revisar los elementos. Fue realmente molesto. Afortunadamente descubro que si di la posición relativa del nodo padre también, esto se resolvió.

En iOS, cuando un elemento dentro de un elemento con -webkit-overflow-scrolling: touch establecido se coloca absolutamente (o fixed) en relación con un elemento fuera del contenedor de desplazamiento, el elemento se representa solo una vez y la representación no se actualiza a medida que se desplaza el elemento. Ejemplo de HTML:

<div class="relative-to-me">
  <div class="scrollable">
    <div class="absolutely-positioned">
    </div>
  </div>
</div>

Si fuerza un re-renderizado cambiando una propiedad CSS (en el inspector, por ejemplo), puede ver que el posicionamiento del elemento se vuelve a renderizar en la ubicación correcta. Sospecho que esto es el resultado de algunos características de rendimiento para optimizar el rendimiento del desplazamiento.

La solución a este problema es establecer will-change: transform en el elemento posicionado absolutamente (o fijo).

.absolutely-positioned {
    will-change: transform;
}

El error todavía vive en iOS 6. Si su problema está relacionado con position: relative, puede resolver el problema estableciendo z-index: 1 temporalmente a través de JS. -webkit-transform: translate(...) no funcionó con position: relative en mi caso.

Probé algunas soluciones diferentes, no parecía funcionar perfectamente en mi caso.

Finalmente he encontrado una manera funciona bien con jQuery:

Apply-webkit-overflow-scroll cada vez que retoques.

*Al principio Apliqué También -webkit-overflow-scrolling:auto cuando TouchDown, para deshabilitar el renderizado de iOS. Pero hizo que Page parpadeara. Así que se me cayó, entonces funciona bien sorprendentemente!

Compruebe las líneas a continuación, espero que ayude:

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