CSS - "позиция: исправлена", действующая как "абсолютная" в Firefox

Я создаю веб-сайт в Safari, и я только что протестировал его в Firefox, и мои фиксированные элементы навигации ведут себя так, как будто они являются абсолютными.

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

Это CSS, который у меня есть для основной навигационной оболочки (это нижний nav.). В Webkit он работает отлично: то есть он придерживается нижней части окна независимо. В firefox он позиционирует себя в конце тегов, поэтому, например, на длинной странице мне придется прокручивать вниз, чтобы увидеть его. Он действует как абсолютный.

У меня также есть навигационная панель.

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

Эта боковая панель также действует так, как будто она абсолютная, то есть она правильно позиционируется на экране, но она удлиняет <body> и, таким образом, появляется горизонтальная полоса прокрутки. height: 100%; также реагирует на высоту <body>, а не высоту окна, поэтому, например, мой <header> имеет верхнее поле 20px, а слайд-панель также наблюдает за этим полем (тело имеет 0 полей). Аналогично, вместо height: 100%;, заканчивающегося в нижней части окна, он заканчивается в нижней части <body>, факторизуя нижнее поле нижнего колонтитула.

Я не могу понять для меня, почему это происходит. Проверка элементов показывает, что все свойства загружаются нормально, а в Chrome и Safari работает. Он работал вначале, и он работал в последний раз, когда я даже редактировал любую навигацию, но с тех пор он перестает работать, так как я создал другие, не относящиеся к делу части сайта.

http://www.upprise.com/demo.php - щелкните значок "Конверт", чтобы увидеть боковую панель

Ответы

Ответ 1

Благодаря процессу устранения я смог определить, что наличие в моем теле следующего содержания вызывает проблемы с фиксированными div в Firefox:

-o-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;

Я первоначально добавил этот код, чтобы предотвратить мерцание в некоторых переходах CSS по всему сайту, но я думаю, мне придется добавить его в каждый отдельный класс.

Ответ 2

У меня была такая же проблема, оказалось, что причиной этого является свойство CSS родительского элемента.

transform: translate3d(0px, 0px, 0px);

Ответ 3

Похоже, что некоторые браузеры будут применять фиксированное позиционирование относительно окна, в то время как Firefox применяет его относительно <body />. Вы должны сделать свой body 100% высокий:

body {
    height: 100%;
}

Но маржа от вашего .header рушится вне элемента body. Измените это:

margin: 25px auto;

:

margin: 0 auto; /* updated - thanks JoshC */
padding: 25px auto;

Ответ 4

Не уверен, почему браузеры визуализировались по-разному, хотя решение довольно просто. Вы должны указать родительским элементам (html/body) высоту 100%, чтобы заполнить всю страницу. Похоже, что FF отображал фиксированные элементы в нижней части содержимого, а не в нижней части окна. Добавление следующего будет зависеть от браузера:

html, body {
    height: 100%;
}

Кроме того, вы должны также использовать отступы на элементе .header в отличие от поля. Это решит другую проблему.

.header {
    margin: 0 auto;    /* use a value of 0 rather than 25px */
    padding: 25px 0;
}

Я протестировал все это в браузере, теперь он будет работать в FF. Он также должен корректно отображаться в Chrome и других.

Ответ 5

Проблема, кажется, в вашем теле, я добавил ширину: 100%; высота: 100%; и переполнение: скрыто; к нему в моей лисице, и это выглядело просто отлично, за исключением нижней панели меню, которая достигла половины ее высоты над дном.

Ответ 6

Мне нужно было удалить некоторые классы css из превосходного контейнера элемента фиксированной прокрутки, у которого был переход, из библиотеки animateCSS.

$(window).on('scroll', function () {
     if (distance <= 65) {
        $('#my-contaniner').removeClass('animated fadeInLeft'); //delete problematic classes for FF
Add your code
 });

Возможно, это помогает

Ответ 7

Я решил проблему, перемещая элемент, который использует position: fixed; из своего исходного родительского элемента, который использует transform: translateX(-50%);.

Таким образом,...

<div class="transformed-container">
   <div="fixed-element"></div>
</div>

... стал...

<div class="transformed-container"></div>

<div class="fixed-element"></div>

Две вещи привели меня к такому выводу: