ios - log - Posición de safari móvil: se ha corregido el error de índice z al desplazarse

mobile safari remote inspector

Question

Sé que los iPhones solían no admitir la posición: fijo, pero ahora sí, y veo un error extraño cuando desplazo un elemento de posición fija detrás de otros elementos con un índice z más alto. El elemento de posiciones fijas con el índice z inferior aparece en la parte delantera momentáneamente, lo que se ve muy mal. ¿Hay alguna manera de prevenir esto?

Intenté agregar -webkit-transform: translate3d(0, 0, 0); Para el elemento fijo y no parece ayudar a este problema.

Aquí hay un jsfiddle también.

Actualización Agregué transform:translateZ(x) además del índice z y no solucionó el problema.

Update2 -webkit prefijo -webkit y esto -webkit soluciona el problema del índice z en un Safari móvil, pero también causa que la posición: solucionada funcione incorrectamente en el escritorio de Chrome.

Answer 1

" Actualización: agregué transform: translateZ (x) además del índice z y no solucionó el problema.

Update2: agregué el prefijo -webkit- y esto SÍ soluciona el problema del índice z en un Safari móvil, pero también causa que la posición: solucionada funcione incorrectamente en el escritorio de Chrome. "

Intente envolver -webkit-transform:translateZ(x) en una consulta de medios específica para dispositivos móviles.
Por ejemplo:

@media only screen and (min-device-width : ... ) and (max-device-width : ... ) {
    .whatever {
        -webkit-transform: translateZ(x)
    }
}

Así que en este caso no hará nada en el escritorio de Chrome.

Answer 2

No estoy abogando por esta solución, pero es lo mejor que tengo en este momento ...

Para replicar el efecto del índice z con la posición fija en un iPhone, parece que se requieren dos técnicas juntas:

1. Como lo sugiere @tnt arriba, use transform:translateZ(n) donde z-index se usa para que el safari móvil maneje el orden de la pila correctamente. Esto parece tener el efecto secundario desafortunado de causar la posición: arreglado para dejar de funcionar ...

2. En lugar de posición: fijo, usa una técnica de javascript como esta para falsificarla.

No he probado esto a fondo (porque no lo voy a hacer), pero parece funcionar bastante bien. Aunque el elemento "fijo" parece tartamudear un poco.

Answer 3

Probé la solución aceptada como respuesta en un caso específico cuando necesitaba establecer una posición diferente en la pila de capas diferentes, pero eso solo no funcionaba en los navegadores de escritorio (Firefox y Chrome) y Safari iOS

Salí con este truco que usa tanto el índice de traducción como el índice z para cada div, que funciona en esas plataformas. El orden de translateZ y z-index es importante. Para establecer cada posición de las capas es

-webkit-transform:translateZ(1px);
-moz-transform:translateZ(1px);
-o-transform:translateZ(1px);
transform:translateZ(1px);
position: relative; 
z-index: 1; 

Usé el mismo valor para el índice z y translateZ solo por coherencia, no es necesario. Ver ejemplo de trabajo http://jsbin.com/peyehufo/5

Answer 4

z-index no es confiable con position: fixed, como se muestra en este fiddle: http://jsfiddle.net/mZMkE/2/ usa la transformación translateZ en su lugar.

transform:translateZ(1px);

en sus elementos de página.

EDITAR: En su código, agregue este css:

.bla, .projects, .contact  {
      -webkit-transform:translateZ(1px);
      -moz-transform:translateZ(1px);
      -o-transform:translateZ(1px);
      transform:translateZ(1px);
}

y luego elimine las referencias de índice z de esos elementos y .intro.