Animaciones CSS3 rompiendo el posicionamiento fijo cuando la página se desplazó

Question

Tengo problemas para descubrir por qué Chrome (que hace que el encabezado fijo desaparezca por completo, Firefox lo mantiene allí pero permite que los elementos absolutamente posicionados fluyan sobre el elemento fijo, he evitado el problema con la opacidad: 0,99, pero todavía requebraja mi mente la forma en que lo hace nada para solucionarlo

http://www.rickpascua.cu.cc/newsite-snazzy/index.html página < --- problema

Answer 1

Todavía no sé por qué la animación CSS está rompiendo el diseño. En mi prueba, con las animaciones en ejecución, tener overflow:hidden;z-index en el encabezado hacía que perdiera el posicionamiento fijo. Sin embargo, tengo una respuesta.

Para empezar, retire

overflow:hidden; 
visibility:visible; 
z-index:99; 

desde el elemento de cabecera posición fija <div id="header">.

Sin embargo, con esas 3 propiedades eliminadas, ¡<div id="slide-contain"/> aún se superpondrá! Esto se debe a la estratificación de contexto de apilamiento implícita, consulte las 7 capas en el artículo CSS_absolute_and_fixed_positioning#The_third_dimension.

El solapamiento no deseado se produce debido a position:relative se ha establecido en la <div id="slide-contain"/> (que es un descendiente de la <div id="wrapper"/>), pero no es no z-index en ese elemento. Me doy cuenta de que se agregó el posicionamiento relativo porque desea colocar absolutamente algunos elementos secundarios dentro.

Por lo tanto, el elemento <div id="slide-contain"/> está en el mismo plano Z que cualquier otro elemento sin un índice Z en la página, que incluye el encabezado fijo. Ambos elementos están en Nivel 6 - Descendientes posicionados con el nivel de pila establecido como automático o (cero), de acuerdo con el artículo vinculado y el apilamiento predeterminado para el orden en el que los elementos aparecen en el DOM, por lo que se muestra <div id="slide-contain"/> sobre `.

Por lo tanto, se requiere z-index:1 en el encabezado para mostrar siempre el encabezado en la parte superior. Simplemente tiene que ser mayor que 0, de modo cambiar z-index:99-z-index:1

Una solución alternativa sería proporcionar una negativoz-index (y position:relative) en el siguiente hermano <div id="wrapper"/>.

Usted podría pensar que agregar un z-index negativo en el <div id="slide-contain"/> sería suficiente pero necesitaría duplicación para los antepasados ​​del elemento, de lo contrario, el <div id="slide-contain"/> sería empujado detrás de su elemento primario.

Answer 2

background: url(../assets/logo.png) center no-repeat,url(../assets/header2.jpg) bottom center; 
height: 50px; 
width: 100%; 
border-bottom: 5px solid black; 
position: fixed; 
text-align: center; 
z-index: 99; 

prueba este va a trabajar

...

pero también existe un problema con su html interno en el div del encabezado, usted está utilizando float div, por lo que también debe usar la clase clear con ellos si desea usar el desbordamiento: oculto o automático.

Answer 3

Conjunto siguiente CSS al elemento desaparecerá

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

El atributo translated3dtransform no existe.translate3d lo hace, y debería resolver el posicionamiento fijo con elementos animados en la misma página.

Answer 4

EDITAR: el usuario @jacob señala que este es un enfoque incorrecto que puede afectar negativamente el rendimiento. Cualquier propiedad que fuerce la aceleración del hardware hará el truco, pero en lugar de aplicar esta regla globalmente, intente aplicar esta regla a los elementos que solo se rompen.

acabamos de encontrar un problema similar al combinar animate.css con foundation por zurb.

la solución subí con base en la respuesta de Ryan Wu

* { 
backface-visibility: hidden; 
} 

Se trabajó para mi problema (elementos fijos perder relleno/fronteras y otros desagradables durante la animación)

Answer 5

Creo que este error se debe a que la animación del contenedor se descarga a la GPU; sin embargo, el posicionamiento fijo saca al descendiente del flujo, por lo que no se descarga junto con el contenedor. Y luego el elemento de posición fija se compone incorrectamente. Agregar cualquier propiedad acelerada por hardware (ex translate3d) al elemento fijo posicionado parece "solucionar" el problema (creo que porque también se descarga a la GPU, evitando el problema durante la composición).

Ex

<div class="container"> 
    <div class="fixed"></div> 
</div> 

---

.container { 
    animation-duration: 0.8s; 
    animation-name: some-animation; 
} 

.fixed { 
    /* transform: translateX(-200%); */ 
    transform: translate3d(-200%, 0, 0); 
    position: fixed; 
    top: 10rem; 
}