css autoplay - El desplazamiento de iPad Safari hace que los elementos HTML desaparezcan y vuelvan a aparecer con un retraso





video ios (10)


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

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

Particularmente, necesitarás esto en elementos secundarios que tienen una position:relative; declaración (o, simplemente vaya todo y hágalo a todos los elementos secundarios).

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

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

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.




Estoy bastante seguro de que acabo de resolver esto con:

overflow-y: auto;

(Presumiblemente solo overflow: auto; también funcionaría según sus necesidades).




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!




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

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



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.




Este es un problema muy común que enfrentan los desarrolladores y que se debe principalmente a Safari's propiedad de Safari's de no volver a crear los 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.

Link1

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




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

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







prueba esto:

tf = [[UITextField alloc] init];
tf.autocapitalizationType = UITextAutocapitalizationTypeSentences;

o establezca esta propiedad en el inspector de propiedades en Interface Builder





css ios ipad html5 mobile-safari