it-swarm.com.de

CSS - "position: fixed" verhält sich in Firefox wie "absolut"

Ich habe eine Website in Safari erstellt und habe sie gerade in Firefox getestet, und meine festen Navigationselemente verhalten sich so, als wären sie absolut positioniert.

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

Dies ist das CSS, das ich für den primären Navigations-Wrapper habe (es ist ein Bottom-Nav.). In Webkit funktioniert es einwandfrei, dh es bleibt unabhängig vom unteren Rand des Fensters. In Firefox positioniert es sich am Ende der Tags, so dass ich zum Beispiel auf einer langen Seite nach unten scrollen muss, um es zu sehen. Es tut so, als wäre es absolut.

Ich habe auch eine Sidebar-Navigation.

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

Diese Seitenleiste wirkt auch so, als wäre sie absolut, dh sie positioniert sich richtig vom Bildschirm, sie verlängert jedoch <body> und die horizontale Bildlaufleiste wird angezeigt. Der height: 100%; reagiert auch auf die <body>-Höhe und nicht auf die Fensterhöhe. Daher hat mein <header> einen oberen Rand von 20px, und die Seitenleiste beachtet diesen Rand ebenfalls (der Körper hat 0-Rand). Ebenso endet der height: 100%; am unteren Rand des Fensters am unteren Rand des <body>, wobei der untere Rand der Fußzeile berücksichtigt wird. 

Ich kann für mein Leben nicht verstehen, warum dies geschieht. Die Elementprüfung zeigt, dass alle Eigenschaften gut geladen werden. In Chrome und Safari funktioniert es. Es hat anfangs funktioniert, und es hat auch funktioniert, als ich das letzte Mal eine der beiden Navigationsfunktionen bearbeitet habe, aber seit dem Bauen anderer, irrelevanter Teile der Website hat es aufgehört zu funktionieren.

http://www.upprise.com/demo.php - Klicken Sie auf das Umschlagsymbol, um die Seitenleiste anzuzeigen

16
user2250471

Durch den Eliminierungsprozess konnte ich feststellen, dass die folgenden Probleme in meinem Körper alle Probleme mit festen Divs in Firefox verursacht haben:

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

Ich hatte diesen Code ursprünglich hinzugefügt, um das Flimmern in bestimmten CSS-Übergängen auf der gesamten Website zu verhindern, aber ich denke, ich muss ihn jetzt jeder Klasse hinzufügen.

20
user2250471

Ich hatte genau das gleiche Problem, stellt sich heraus, dass die folgende CSS-Eigenschaft eines übergeordneten Elements das Problem verursacht hat.

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

Es scheint, dass einige Browser eine feste Positionierung relativ zum Fenster anwenden, während Firefox diese relativ zum <body /> anwendet. Sie müssen Ihre body zu 100% groß machen:

body {
    height: 100%;
}

Der Rand Ihres .header bricht jedoch außerhalb des body-Elements zusammen. Ändere das:

margin: 25px auto;

zu diesem:

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

Ich habe das Problem gelöst, indem ich das Element, das position: fixed; verwendet, aus dem ursprünglichen übergeordneten Element, das transform: translateX(-50%); verwendet, entfernt hat.

Somit...

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

...wurden...

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

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

Zwei Dinge führten mich zu dieser Schlussfolgerung:

  1. Die Antwort von @ Pankaj zeigt, dass der Übersetzungswert ein Problem verursachen kann.
  2. @ Wildhonys Kommentar zu einer anderen Antwort verweist auf eine Erklärung der zugrunde liegenden Ursache: http://meyerweb.com/eric/thoughts/2011/09/12/un-fixing-fixed-elements-with-css-transforms/
2
Kevin Weber

Das Problem scheint in Ihrem Körper zu liegen, ich habe Breite hinzugefügt: 100%; Höhe: 100%; und Überlauf: versteckt; Es in meinem Feuerfuchs und es sah gut aus, abgesehen von der unteren Menüleiste, die die Hälfte seiner Höhe über den Boden ging. 

2
Patrick

Ich musste einige CSS-Klassen aus dem übergeordneten Container des Elements fixed-on-scroll , das einen Übergang hatte, aus der animateCSS-Bibliothek entfernen.

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

Vielleicht hilft es

1
Beltran

Nicht sicher warum Die Browser wurden unterschiedlich gerendert, obwohl die Lösung ziemlich einfach ist. Sie müssen den übergeordneten Elementen (html/body) eine Höhe von 100% zuweisen, um die gesamte Seite ausfüllen zu können. Es scheint, als würde FF die festen Elemente am unteren Rand des Inhalts und nicht am unteren Rand des Fensters darstellen. Wenn Sie Folgendes hinzufügen, wird es in allen Browsern funktionieren:

html, body {
    height: 100%;
}

Darüber hinaus sollten Sie das Auffüllen des .header-Elements anstelle eines Randes verwenden. Dies wird ein anderes Problem lösen.

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

Ich habe das alles im Browser getestet, es funktioniert jetzt in FF. Es sollte auch ordnungsgemäß in Chrome und anderen gerendert werden.

1
Josh Crozier