ios - privada - restaurar safari iphone

Safari de iOS 9: cambiar un elemento a una posición fija mientras se desplaza no se pintará hasta que se detenga el desplazamiento

Question

He estado desarrollando un sitio y aprovechándome del bastante bueno complemento jQuery Sticky Kit . Funciona cambiando la propiedad de position a fixed y viceversa cuando sea apropiado. Se ejecuta sin problemas en el escritorio y aceptablemente en dispositivos móviles.

O al menos solía hacerlo. iOS 9 viene con un nuevo comportamiento: si la position de un elemento cambia de static / relative / absolute a fixed mientras la animación de desplazamiento está en curso, el elemento se vuelve invisible hasta que el desplazamiento se detiene. Curiosamente, el cambio opuesto (de fixed a cualquier otra cosa) se realiza sin problemas.

Un ejemplo de trabajo se puede encontrar en la página de inicio del complemento . Se supone que la barra de navegación negra ("Referencia de ejemplos") es adhesiva. Originalmente está colocado static en la mitad de la página. A medida que se desplaza hacia abajo, se fixed y (en iOS 9) desaparece hasta que se detiene el desplazamiento. El comportamiento en los navegadores de escritorio y iOS 8 es correcto.

Esperaba las soluciones alternativas típicas de CSS: forzar una transformación 3D, deshabilitar la visibilidad de la cara posterior y similares, oscuras propiedades de propiedad, ... Pero nada parece funcionar.

¿Estamos a punto de olvidar por completo los elementos "adhesivos" ahora que funcionaba?

Answer 1

Agregue esto a su elemento fijo
Usando una mezcla: @include transform(translate3d(0px,0px,0px))
Usando CSS: translate3d(0px,0px,0px)

Answer 2

La única solución que encontré que funcionaba correctamente era deshabilitar las traducciones del índice z en elementos secundarios directos del elemento fijo, por ejemplo:

.is-sticky > * {
-webkit-transform: translateZ(0);
}

Answer 3

Solucioné este problema con un elemento fijo adicional. Después de algunas pruebas descubrí que es el primer elemento que se arregla tiene este problema. El segundo, tercer, etc. funciona bien en dispositivos iOS.

Entonces, coloque justo después de que su cuerpo abra una etiqueta div.

.fixed-fix {
position:fixed;
top:-1px;
height:1px;
width:100%;
background:white;
}

¡ahora funciona! El div de reparación fija DEBE tener un color de fondo, porque de lo contrario no funcionará ...

Answer 4

Tuve este mismo problema y pude hackearlo usando el viejo truco "forzar una transformación 3D". Simplemente configure el elemento del que va a cambiar la posición para tener una propiedad de transformación de translate3d(0px,0px,0px) . Asegúrese de hacer esto antes de que se cambie la propiedad de posición.

Answer 5

jQuery Sticky Kit y otros complementos similares, incluso bien codificados, presentan este tipo de comportamiento en iOS 9, y no es la primera vez que sucede algo como esto. El punto principal aquí es que Firefox Safari y Safari Mobile admiten la position: sticky; experimental position: sticky; , también lo hizo Google (Chromium) pero, debido a problemas de integración, ha tenido que deshabilitarlo temporalmente, puede leer más sobre esto here . Dicho esto, supongo que, muy pronto, position: sticky; será parte de la especificación CSS y será compatible con todos los principales navegadores, por lo tanto, creo que el mejor enfoque para resolver este problema es usar un polyfill en lugar de un complemento. Por supuesto, un polyfill no cubrirá todas las características y funcionalidades que ofrecen estos complementos. Sin embargo, en muchas situaciones, usar un polyfill hará el trabajo, como una solución robusta y efectiva compatible con todos los principales navegadores. En mi opinión, es el camino a seguir, por ahora. Yo personalmente uso stickyfill aunque estoy seguro de que otros polyfills en la naturaleza harán el truco. Todo lo que puedo decir es que, desde que comencé a usar un polyfill en lugar de complementos, no he tenido problemas de compatibilidad con el navegador.