css3 - tricks - personalizar scroll css

CSS3 propiedad webkit-overflow-scrolling: toque ERROR

Question

iOS 5 lanzó a los diseñadores web una nueva propiedad -webkit-overflow-scrolling:touch que utiliza el acelerador de hardware de los dispositivos iOS para proporcionar desplazamiento nativo para un div desplazable.

Cuando se implementa en nuestro sitio en desarrollo, funciona pero no funciona bien. Creo que puede haber un problema de CSS, por lo tanto, pregunto aquí.

El siguiente fiddle te mostrará que funciona perfectamente

Si aparece en nuestro sitio en desarrollo, encontrará el mismo panel en la pestaña de instalaciones, pero en iOS, aunque el desplazamiento es perfecto, la sección desbordada no se muestra con imágenes cortadas literalmente en dos.

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

No tengo idea de cómo arreglar esto http://www.golfbrowser.com/photo.PNG

Answer 1

Como señaló @relluf, la aplicación de transiciones 3D en el elemento relativo corrige el error. Sin embargo, lo investigué un poco más y parece que la aplicación -webkit-transform: translateZ(0px) también funciona (esto es lo que hace Google en el contenedor de mapas gmaps) y no necesita estar en el elemento relativamente posicionado, solo el descendiente directo del elemento desplazable.

Por lo tanto, si no desea mantener manualmente una lista de todos los lugares donde se necesita la solución, puede hacer lo siguiente:

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

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

Answer 2

El error aún vive en iOS 6. Si su problema está relacionado con la 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.

Answer 3

En iOS, cuando un elemento dentro de un elemento con -webkit-overflow-scrolling: touch set se coloca absolutamente (o fixed ) relativo a un elemento fuera del contenedor de desplazamiento, el elemento se representa solo una vez y el renderizado no se actualiza como el elemento se desplaza. Muestra de HTML:

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

Si fuerza una nueva representación mediante el cambio de una propiedad CSS (en el inspector, por ejemplo), puede ver que el posicionamiento del elemento se vuelve a representar en la ubicación correcta. Sospecho que esto es el resultado de algunas 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 absoluto (o fijo).

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

Answer 4

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

Finalmente, he encontrado que una forma funciona bien con jQuery:

Aplique la propiedad -webkit-overflow-scrolling cada vez que retoca.

* Al principio también lo apliqué -webkit-overflow-scrolling: auto cuando TouchDown , para deshabilitar el renderizado de iOS. Pero hizo que Page parpadeara. Así que lo dejé caer, ¡y luego funciona bien sorprendentemente!

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

Answer 5

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

Answer 6

Me he encontrado con este error también. Lo arreglé aplicando el siguiente CSS a los elementos principales:

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

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

Answer 7

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

Los elementos relativos y de posición absoluta siempre se recortan en el límite y faltan por completo (excepto en el caso de espacios vacíos) fuera de él. Si cambia dinámicamente la propiedad de posición, de estático a absoluto, solo la parte visible de la ventana Div deslizable permanece renderizada, donde sea que esté el desplazamiento.

Answer 8

También experimenté el problema en el que el desbordamiento de desplazamiento con -webkit-overlfow-scrolling establecido en touch daba como resultado problemas de redibujo con los elementos posicionados. En mi caso, tenía una lista en la que los elementos individuales tenían un posicionamiento relativo para poder usar el posicionamiento en los elementos secundarios. 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, descubrí que si también le di al pariente posición relativa del nodo, esto se resolvió.