css - playsinline - video autoplay html ios
El desplazamiento de iPad Safari hace que los elementos HTML desaparezcan y vuelvan a aparecer con un retraso (11)
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.
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.
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.
Cuando el translate3d no funciona, intente agregar perspectiva. Siempre me funciona
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
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.
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).
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.
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).
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.
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;
}
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.
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!