[Css] El desplazamiento de iPad Safari hace que los elementos HTML desaparezcan y vuelvan a aparecer con un retraso


Answers

Esta es la respuesta completa a mi pregunta. Originalmente, marqué 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 dos años y medio 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 la respuesta. Así que aquí está la respuesta completa que resolvió mi problema:

@ Colin Williams, ¡gracias! Su respuesta y el artículo con el 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 elementos RENDER que estaban fuera de la 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, debido a la cual estaba en un aprieto.

La aplicación de translate3d a elementos relativamente posicionados resolvió el problema para esos elementos, pero otros elementos dejaron de renderizar, una vez fuera de la pantalla. Los elementos con los que no podía interactuar (ilustraciones) nunca volverían a renderizarse, 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 representa los elementos que están fuera de la pantalla, o a veces se renderiza erráticamente, al usar -webkit-overflow-scrolling: touch . A menos que se aplique una translate3d a todos los demás elementos que puedan quedar fuera de la pantalla debido a ese desplazamiento, esos elementos se cortan después de desplazarse.

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

Question

Actualmente estoy desarrollando una aplicación web usando html5 y jQuery para iPad Safari. Me encuentro con un problema en el que las áreas de desplazamiento grandes provocan que los elementos que están fuera de 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 pantalla, cuando me desplazo hacia abajo (o hacia arriba), el comportamiento esperado es que el elemento aparezca en la pantalla como Me desplazo hacia ella.

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

Esto está causando un problema muy notable para mí, haciendo que todo parezca entrecortado, aunque no lo es. Supongo que el iPad Safari está tratando de hacer algo para salvar la memoria. ¿Hay alguna manera en la que pueda evitar que se produzca esta agitación? Además, también apreciaría si alguien puede arrojar luz sobre lo que el iPad Safari realmente está tratando de hacer.




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 "snap" de iscroll. La solución vino con dar "position:relative; z-index:1000;display:block" propiedades de CSS a todo el contenedor que contiene el elemento de desplazamiento y no hay necesidad de dar translate3d a elementos secundarios.




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 yo estaba definiendo las posiciones superior e inferior. Lo que lo solucionó fue agregar una altura mínima (de 100 px).




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-transform para rotar un elemento puede no ser suficiente para abordar el problema de apariencia también (como -webkit-transform: rotate(-45deg) ). En este caso puede usar -webkit-transform: translateZ(0px) rotateZ(-45deg) como un truco ( -webkit-transform: translateZ(0px) rotateZ(-45deg) cuenta la rotación de Z ).

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




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) en un elemento. Luego, después de un breve retraso, -webkit-transform: none esta propiedad, es decir, -webkit-transform: none Este enfoque parece funcionar.

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






Links