css - tipos - position sticky not working
CSS-"posición: fija" que actúa como "absoluta" en Firefox (7)
He estado construyendo un sitio web en Safari, y acabo de probarlo en Firefox y mis elementos de navegación fijos se están comportando como si su posición fuera absoluta.
#navigation {
display: block;
width: 100%;
height: 50px;
position: fixed;
left: 0px;
bottom: 0px;
text-align: center;
z-index: 99000;
}
Este es el CSS que tengo para el envoltorio de navegación principal (es un navegador inferior). En Webkit, funciona perfectamente: es decir, se adhiere a la parte inferior de la ventana independientemente. En Firefox, se coloca al final de las etiquetas, por lo que, por ejemplo, en una página larga, tengo que desplazarme hacia abajo para verlo. Está actuando como si fuera absoluto.
También tengo una barra lateral de navegación.
.slidebar {
display: block;
position: fixed;
left: -1px;
top: -1px;
width: 1px;
height: 100%;
overflow: hidden;
-webkit-transition: all 300ms ease;
-moz-transition: all 300ms ease;
-o-transition: all 300ms ease;
-ms-transition: all 300ms ease;
transition: all 300ms ease;
z-index: 99998;
}
Esta barra lateral también actúa como si fuera absoluta, es decir, se posiciona a sí misma fuera de la pantalla correctamente, pero se está alargando <body> y, por lo tanto, aparece la barra de desplazamiento horizontal. La height: 100%; también responde a la altura <body> y no a la altura de la ventana, por lo que, por ejemplo, mi <header> tiene un margen superior de 20px, y la barra deslizante también observa ese margen (el cuerpo tiene un margen de 0). Asimismo, en lugar de la height: 100%; terminando en la parte inferior de la ventana, termina en la parte inferior del <body> , teniendo en cuenta el margen inferior del pie de página.
No puedo entender por mi vida por qué está sucediendo esto. La inspección de elementos muestra que todas las propiedades se están cargando bien, y en Chrome y Safari funciona. Inicialmente funcionó, y funcionó la última vez que incluso edité cualquiera de las dos navegaciones, pero desde entonces dejó de funcionar desde que construí otras partes irrelevantes del sitio.
http://www.upprise.com/demo.php : haga clic en el ícono Sobre para ver la barra lateral
A través del proceso de eliminación, pude determinar que tener lo siguiente en mi cuerpo estaba causando todos los problemas con divs reparados en Firefox:
-o-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
Originalmente había añadido este código para evitar el parpadeo en ciertas transiciones de CSS en todo el sitio, pero supongo que ahora tendré que agregarlo a cada clase individual.
El problema parece estar en tu cuerpo, he añadido ancho: 100%; altura: 100%; y desbordamiento: oculto; en mi zorro de fuego y se veía bien, a excepción de la barra de menú inferior que cubría la mitad de su altura.
Necesitaba eliminar algunas clases de css del contenedor superior del elemento fijo en desplazamiento que tenía una transición, de la biblioteca animateCSS.
$(window).on(''scroll'', function () {
if (distance <= 65) {
$(''#my-contaniner'').removeClass(''animated fadeInLeft''); //delete problematic classes for FF
Add your code
});
Tal vez ayude
No estoy seguro de por qué los navegadores se mostraban de manera diferente, aunque la solución es bastante simple. Debes dar a los elementos principales ( html / body ) una altura del 100% para llenar toda la página. Parece que FF procesó los elementos fijos en la parte inferior de los contenidos en oposición a la parte inferior de la ventana. Agregar lo siguiente hará que funcione en todos los navegadores:
html, body {
height: 100%;
}
Además, también debe usar el relleno en el elemento .header en lugar de un margen. Esto solucionará otro problema.
.header {
margin: 0 auto; /* use a value of 0 rather than 25px */
padding: 25px 0;
}
He probado todo esto en el navegador, ahora funcionará en FF. También debe renderizarse correctamente en Chrome y otros.
Parece que algunos navegadores aplicarán un posicionamiento fijo en relación con la ventana, mientras que Firefox lo está aplicando en relación con el <body /> . Necesitas hacer tu body 100% alto:
body {
height: 100%;
}
Pero el margen de tu encabezado está colapsando fuera del elemento del cuerpo. Cambia esto:
margin: 25px auto;
a esto:
margin: 0 auto; /* updated - thanks JoshC */
padding: 25px auto;
Resolví el problema moviendo el elemento que usa position: fixed; fuera de su elemento padre original que utiliza transform: translateX(-50%); .
Así...
<div class="transformed-container">
<div="fixed-element"></div>
</div>
...convirtió...
<div class="transformed-container"></div>
<div class="fixed-element"></div>
Dos cosas me llevaron a esta conclusión:
- La respuesta de @Pankaj muestra que el valor de conversión puede causar un problema.
- El comentario de @ Wildhoney a otra respuesta hace referencia a una explicación de la causa subyacente: meyerweb.com/eric/thoughts/2011/09/12/…
Tuve el mismo problema exacto, resulta que la siguiente propiedad CSS de un elemento padre estaba causando el problema.
transform: translate3d(0px, 0px, 0px);