Das feste Element verschwindet in Chrome

Wenn Sie auf einer von mir erstellten Website scrollen, position: fixedfunktioniert die Verwendung der CSS-Eigenschaft wie erwartet, sodass eine Navigationsleiste ganz oben auf der Seite angezeigt wird.

Wenn Sie in Chrome jedoch die Links in der Navigationsleiste verwenden, wird diese manchmal ausgeblendet. Normalerweise ist das Element, auf das Sie geklickt haben, immer noch sichtbar, aber nicht immer. Manchmal verschwindet das Ganze. Durch Bewegen der Maus wird ein Teil des Elements zurückgebracht, und durch Scrollen mit dem Scrollrad oder den Pfeiltasten wird das Element mit nur einem Klick zurückgebracht. Sie können es (zeitweise) auf http://nikeplusphp.org sehen - möglicherweise müssen Sie einige Male auf einige der Navigationslinks klicken, um es zu sehen.

Ich habe auch versucht, mit dem Z-Index und dem Sichtbarkeits- / Anzeigetyp zu spielen, aber ohne Glück.

Ich bin auf diese Frage gestoßen, aber das Update hat bei mir überhaupt nicht funktioniert. Scheint ein Webkit-Problem zu sein, da IE und Firefox einwandfrei funktionieren.

Ist dies ein bekanntes Problem oder gibt es eine Lösung, um feste Elemente sichtbar zu halten?

Aktualisieren:

Nur Effektelemente, die top: 0;ich ausprobiert habe bottom: 0;und die wie erwartet funktionieren.

In -webkit-transform: translateZ(0)an das position: fixedElement. Dies zwingt Chrome, die Hardwarebeschleunigung zu verwenden, um das feste Element kontinuierlich zu malen und dieses bizarre Verhalten zu vermeiden.

Ich habe einen Chrome-Fehler für diesen https://bugs.chromium.org/p/chromium/issues/detail?id=288747 erstellt . Bitte markieren Sie es, damit dies Aufmerksamkeit erregt.

Das behebt es für mich:

html, body {height:100%;overflow:auto}

Ich hatte das gleiche Problem mit Chrome. Es scheint ein Fehler zu sein, der auftritt, wenn auf der Seite zu viel los ist. Ich konnte es beheben, indem ich dem Element mit fester Position ( transform: translateZ(0);-webkit-transform: translateZ(0);) den folgenden Transformationscode hinzufügte, der dies erzwingt Der Browser verwendet die Hardwarebeschleunigung, um auf die grafische Verarbeitungseinheit (GPU) des Geräts zuzugreifen und Pixel zum Fliegen zu bringen. Webanwendungen hingegen werden im Kontext des Browsers ausgeführt, sodass die Software den größten Teil (wenn nicht den gesamten) Rendering-Vorgang ausführt, was zu weniger Leistung bei Übergängen führt. Das Web hat jedoch aufgeholt, und die meisten Browser-Anbieter bieten jetzt eine grafische Hardwarebeschleunigung mithilfe bestimmter CSS-Regeln.

Verwenden von -webkit-transform: translate3d (0,0,0); wird die GPU für die CSS-Übergänge in Aktion setzen und sie glatter machen (höhere FPS).

Hinweis: translate3d (0,0,0) macht nichts in Bezug auf das, was Sie sehen. Es bewegt das Objekt um 0 Pixel in der x-, y- und z-Achse. Es ist nur eine Technik, um die Hardwarebeschleunigung zu erzwingen.

#element {
    position: fixed;
    background: white;
    border-bottom: 2px solid #eaeaea;
    width: 100%;
    left: 0;
    top: 0;
    z-index: 9994;
    height: 80px;
    /* MAGIC HAPPENS HERE */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

Die oben genannten Optionen funktionierten erst, als ich zwei der angebotenen Lösungen gemischt hatte.

Durch Hinzufügen des Folgenden zum festen Element hat es funktioniert. Grundsätzlich wurde für mich auch ein Z-Index benötigt:

-webkit-transform: translateZ(0);
z-index: 1000;

Dies ist ein Webkit-Problem, das noch nicht behoben wurde. Seltsamerweise verursacht der Sprung mit JavaScript, anstatt den #URL-Wert zu verwenden, das Problem nicht. Um das Problem zu beheben, habe ich eine JavaScript-Version bereitgestellt, die den Ankerwert verwendet und die absolute Position des Elements mit dieser ID ermittelt und zu dieser springt:

var elements = document.getElementsByTagName('a');
for(var i = 1; i < elements.length; i++) {
    elements[i].onclick = function() {
        var hash = this.hash.substr(1),
            elementTop = document.getElementById(hash).offsetTop;
        window.scrollTo(0, elementTop + 125);
        window.location.hash = '';
        return false;
    }
}

Ich könnte dies weiter verfeinern und feststellen, dass nur nach Links gesucht wird, die mit einem beginnen #, und nicht nach einem aTag, das es findet.

Wenn es nach dem Hinzufügen nicht funktioniert

-webkit-transform: translateZ (0)

als auch hinzufügen

benutzerskalierbar = nein

auf Ansichtsfenster Meta

Quelle hier

es hat bei mir funktioniert

Ich bin in einem anderen Fall auf dasselbe Problem gestoßen. Dies lag an der Verwendung derselben ID an mehreren Stellen. Zum Beispiel habe ich #full 2 ​​divs verwendet.

Es scheint, dass Mozilla und IE die Verwendung derselben ID in mehreren Fällen unterstützen. Aber Chrom nicht. Es reagierte mit einem festen Element, das in meinem Fall verschwand.

Nur das Entfernen der IDs löste das Problem.

Keiner von ihnen hat für mich funktioniert, außer das Modal über Javascript aufzurufen

<a href="#\" onclick="show_modal();">Click me to open MyModal</a>
<script>
function show_modal()
{
  MyModal.style.display = 'block';
}
</script>

Abgesehen davon löste keine der oben genannten Lösungen mein Problem.

Das hat bei mir funktioniert. Fügen Sie OverflowIhrem obersten Container eine Eigenschaft hinzu, die Div oder Form usw. sein kann.

div, form
{
  overflow:visible;    
}

Das gleiche Problem ist mir passiert. Für die Hauptseite der Website. Ich habe einen festen Header erstellt und ein Bild für das Frontposter verwendet. Alles hat gut funktioniert. Aber in dem Moment, in dem ich die Deckkraft des Posterbildes geändert habe, ist meine Kopfzeile mit Position: fest; wurde verschwunden. Es war dort in den Chrome-Entwicklertools vorhanden. War aber total transparent auf der Website.

Ich habe jede Lösung von StackOverflow, W3shools, Geeke4geeks ausprobiert. Aber wenn eine Sache repariert wurde, wurde eine andere Sache durcheinander gebracht.

Also habe ich gerade Photoshop geöffnet und das Bild manuell bearbeitet. Und dann auf meiner Website gepostet. Es funktionierte. Trotzdem ist es für Divs unter den festen Elementen nicht effektiv.

Wenn keine der oben genannten Antworten für Sie funktioniert hat, stellen Sie sicher, dass Sie kein Dummy wie ich sind und einen Überlauf haben: versteckt; auf das feste Element setzen :(

Was ist, wenn keines der oben genannten Verfahren überhaupt funktioniert hat? einfacher Fall von klebrigem Header + mobilem Seitenmenü, das Inhalte schiebt.

Ich versuche einen Weg zu finden, um zu vermeiden, dass ein festes Element (klebriger Header) übersetzt wird, aber in diesem Fall ist nichts eine gute Alternative.

Da es bisher keine Problemumgehung für den Umfang gibt, gibt es eine JS-Alternative, für die ich mich entschieden habe, um die absolute Position des festen Elements neu zu berechnen. Siehe hier: https://stackoverflow.com/a/21487975/2012407