CSS - “position: fixed” agindo como “absoluto” no Firefox

Question

Jan 29, 2014, 08:23 PM

CSS - “position: fixed” agindo como “absoluto” no Firefox

Estou construindo um site no Safari e acabei de testá-lo no Firefox e meus elementos de navegação fixos estão se comportando como se sua posição fosse absoluta.

#navigation {
    display: block;
    width: 100%;
    height: 50px;
    position: fixed;
    left: 0px;
    bottom: 0px;
    text-align: center;
    z-index: 99000;
}

Este é o CSS que eu tenho para o wrapper de navegação primário (é uma navegação inferior). No Webkit, ele funciona perfeitamente: ou seja, fica na parte inferior da janela, independentemente. No firefox, ele se posiciona no final das tags, então, por exemplo, em uma página longa, eu teria que rolar para baixo apenas para vê-lo. Está agindo como se fosse absoluto.

Eu também tenho uma navegação na barra lateral.

.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;
}

Essa barra lateral também está agindo como se fosse absoluta - ou seja, está se posicionando fora da tela corretamente, mas está se alongando<body> e, portanto, a barra de rolagem horizontal é exibida. oheight: 100%; também está respondendo à<body> altura e não a altura da janela, então, por exemplo, meu<header> tem uma margem superior de 20px e a barra deslizante também observa essa margem (o corpo tem 0). Da mesma forma, em vez deheight: 100%; terminando na parte inferior da janela, termina na parte inferior da<body>, fatorando na margem inferior do rodapé.

Não consigo entender por minha vida por que isso está acontecendo. A inspeção do elemento mostra que todas as propriedades estão carregando bem e, no Chrome e Safari, ele funciona. Funcionou inicialmente e funcionou na última vez em que editei a navegação, mas parou de funcionar desde que construí outras partes irrelevantes do site.

http://www.upprise.com/demo.php - clique no ícone Envelope para ver a barra lateral