El desplazamiento del iPad Safari hace que los elementos HTML desaparezcan y reaparezcan con retraso

Actualmente estoy desarrollando una aplicación web usando html5 y jQuery para iPad Safari. Me encuentro con un problema en el que grandes áreas de desplazamiento hacen que los elementos que están fuera de la pantalla aparezcan después de un retraso cuando me desplazo hacia ellos.

Lo que quiero decir con eso es que si tengo una fila de imágenes (o incluso un div con un degradado) que está fuera de la pantalla, cuando me desplazo hacia abajo (o hacia arriba), el comportamiento esperado es que el elemento aparezca en la pantalla como Me estoy desplazando a eso.

Sin embargo, lo que veo es que el elemento no aparece hasta que levanto el dedo de la pantalla y el desplazador finaliza todas sus animaciones.

Esto me está causando un problema súper notable, haciendo que todo parezca entrecortado, aunque no lo es. Supongo que el iPad Safari está tratando de hacer algo para ahorrar memoria. ¿Hay alguna manera de evitar que ocurra esta agitación? Además, también agradecería si alguien puede arrojar luz sobre lo que el iPad Safari realmente está tratando de hacer.

Debe engañar al navegador para que use la aceleración de hardware de manera más efectiva. Puede hacer esto con una transformación 3d vacía:

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

En particular, necesitará esto en los elementos secundarios que tienen una position:relative;declaración (o, simplemente, haga todo lo posible y hágalo en todos los elementos secundarios).

No es una solución garantizada, pero es bastante exitosa la mayor parte del tiempo.

Punta de sombrero: https://web.archive.org/web/20131005175118/http://cantina.co/2012/03/06/ios-5-native-scrolling-grins-and-gothcas/

Esta es la respuesta completa a mi pregunta. Originalmente había marcado la respuesta de @Colin Williams como la respuesta correcta, ya que me ayudó a llegar a la solución completa. Un miembro de la comunidad, @Slipp D. Thompson, editó mi pregunta, después de aproximadamente 2,5 años de haberla preguntado, y me dijo que estaba abusando del formato de preguntas y respuestas de SO. También me dijo que publicara esto por separado como respuesta. Así que aquí está la respuesta completa que resolvió mi problema:

@Colin Williams, gracias! Su respuesta y el artículo al que se vinculó me dieron una pista para probar algo con CSS.

Entonces, estaba usando translate3d antes. Produjo resultados no deseados. Básicamente, cortaría y NO RENDERÍA elementos que estaban fuera de pantalla, hasta que interactué con ellos. Entonces, básicamente, en orientación horizontal, la mitad de mi sitio que estaba fuera de la pantalla no se mostraba. Esta es una aplicación web para iPad, por lo que estaba en una solución.

La aplicación de translate3d a elementos relativamente posicionados resolvió el problema para esos elementos, pero otros elementos dejaron de renderizarse, una vez fuera de la pantalla. Los elementos con los que no podía interactuar (ilustraciones) nunca volverían a mostrarse, a menos que volviera a cargar la página.

La solución completa:

*:not(html) {
    -webkit-transform: translate3d(0, 0, 0);
}

Ahora, aunque esta podría no ser la solución más "eficiente", fue la única que funciona. Mobile Safari no procesa los elementos que están fuera de la pantalla, o a veces se procesa de manera irregular, cuando se usa -webkit-overflow-scrolling: touch. A menos que se aplique un translate3d a todos los demás elementos que podrían salir de la pantalla debido a ese desplazamiento, esos elementos se cortarán después del desplazamiento.

Entonces, gracias de nuevo, y espero que esto ayude a alguna otra alma perdida. ¡Esto seguramente me ayudó a lo grande!

Apuntar a todos los elementos excepto html: *:not(html) en mi caso, causé problemas en otros elementos. Modificó el contexto de apilamiento, haciendo que se rompa algún índice z.

Deberíamos tratar de apuntar al elemento correcto y aplicarlo -webkit-transform: translate3d(0,0,0)solo a él.

Editar: a veces translate3D(0,0,0)no funciona, podemos usar el siguiente método, apuntando al elemento correcto:

@keyframes redraw{
    0% {opacity: 1;}
    100% {opacity: .99;}
}

// ios redraw fix
animation: redraw 1s linear infinite;

Cuando el translate3d no funciona, intente agregar perspectiva. Siempre funciona para mi

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

http://blog.teamtreehouse.com/increase-your-sites-performance-with-hardware-accelerated-css

Agregar -webkit-transform: translate3d(0,0,0)a un elemento estáticamente no funciona para mí.

Aplico esta propiedad dinámicamente. Por ejemplo, cuando se desplaza una página, configuro -webkit-transform: translate3d(0,0,0)un elemento. Luego, después de un breve retraso, restablezco esta propiedad, es decir, -webkit-transform: none este enfoque parece funcionar.

Gracias, @Colin Williams por señalarme en la dirección correcta.

Tuve el mismo problema con iscroll 4.2.5 en ios7. Todo el elemento de desplazamiento simplemente desaparece. Intenté agregar translate3d(0,0,0)como se sugirió aquí, resolvió el problema, pero deshabilitó el efecto de "ajuste" de iscroll. La solución vino con dar "position:relative; z-index:1000;display:block"propiedades css a todo el contenedor que contiene el elemento de desplazamiento y no hay necesidad de dar translate3d a elementos secundarios.

A veces translate3dpuede no funcionar, en esos casos perspectivese puede utilizar

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

Estoy bastante seguro de que acabo de resolver esto con:

overflow-y: auto;

(Presumiblemente overflow: auto;, también funcionaría dependiendo de sus necesidades).

Hay casos en los que se aplica una rotación y / o se usa un índice Z.

Rotación : una declaración existente de -webkit-transformrotar un elemento podría no ser suficiente para abordar el problema de apariencia también (como -webkit-transform: rotate(-45deg)). En este caso, puede usarlo -webkit-transform: translateZ(0px) rotateZ(-45deg)como un truco ( tenga en cuenta la rotación Z ).

Índice Z : junto con la rotación, puede definir una z-indexpropiedad positiva , como z-index: 42. Los pasos anteriores descritos en "Rotación" fueron en mi caso suficientes para resolver el problema, incluso con el vacío translateZ(0px). Sin embargo, sospecho que el índice Z en este caso puede haber causado la desaparición y reaparición en primer lugar. En cualquier caso, la z-index: 42propiedad debe mantenerse, -webkit-transform: translateZ(42px)solo que no es suficiente.

Este es un problema muy común que enfrentan los desarrolladores y que se debe principalmente a la Safari'spropiedad de no recrear elementos definidos como position : fixed.

Entonces, cambie la propiedad de posición o se debe aplicar algún truco como se menciona en otras respuestas.

Enlace1

Link2

En mi caso (una aplicación iOS Phonegap), la aplicación de translate3d a elementos secundarios relativos no resolvió el problema. Mi elemento desplazable no tenía una altura establecida, ya que estaba absolutamente posicionado y estaba definiendo las posiciones superior e inferior. Lo que me arregló fue agregar una altura mínima (de 100 px).

Tuve el mismo problema al usar una versión anterior de Fancybox. Actualizar a v3 resolverá su problema O simplemente puede agregar:

html, body {
    -webkit-overflow-scrolling : touch !important;
    overflow: auto !important;
    height: 100% !important;
}

Enfrenté este problema en un proyecto de Framework7 y Cordova. Probé todas las soluciones anteriores. No resolvieron mi problema.

En mi caso, estaba usando más de 10 animaciones CSS en la misma página con rotación infinita (transformación). Tuve que eliminar las animaciones. Está bien ahora con la falta de algunas características visuales.

Si las soluciones anteriores no le ayudan, puede comenzar a eliminar algunas animaciones.

El -webkit-transform: translate3d(0, 0, 0);truco no me funcionó. En mi caso, había establecido un padre para:

// parent
height: 100vh;

Cambiando eso a:

height: auto;
min-height: 100vh;

Se resolvió el problema en caso de que alguien más se enfrentara a la misma situación.

En mi caso, CSS no solucionó el problema. Noté el problema al usar jQuery para volver a representar un botón.

$("#myButton").html("text")

Prueba esto

$("#myButton").html("<span>text</span>")