Das feste Element verschwindet in Chrome

73

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.

cchana
quelle
Ich frage mich, ob es mit diesem Problem zusammenhängt ...
raina77ow
Vielen Dank für den Link, ich habe zum Thread beigetragen, frage mich aber immer noch, ob es einen Weg gibt, das Problem zu umgehen.
Cchana
Komisch, ich habe genau das Gegenteil Problem, wo top:0das Element angezeigt wird, bottom:0aber nicht. Leider behebt auch keine dieser Antworten das Problem.
CodingWithSpike
Nur eine Randnotiz: Ihre Seite versucht, unsichere Skripte (HTTP-Protokoll) zu laden, während das normale Protokoll für Ihre Seite HTTPS ist. Sie sollten das wahrscheinlich beheben, da es sich um ein Sicherheitsproblem handelt und große Browser (wie Chrome) die Skripte zunächst nicht laden, was Ihre Seite
beschädigen
@FullyHumanProgrammer danke, diese Frage wurde lange vor dem Wechsel zu HTTPS gestellt, aber es sieht so aus, als hätte sich etwas geändert. Werde es untersuchen.
Cchana

Antworten:

200

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.

TJ VanToll
quelle
5
Ich hatte mehrere Stunden mit diesem Fehler zu kämpfen, du hast mich gerettet. Dies sollte die akzeptierte Antwort sein! Vielen Dank.
Smajl
1
Das hat bei mir funktioniert, ich hatte das Problem übrigens nur unter Chrome / Win, nicht unter Chromium / Ubuntu.
Paolo Mioni
2
Der Fehler ist in Chrome38 / OSX immer noch vorhanden und diese Antwort funktioniert immer noch.
Tobiv
2
Gefunden dieses Problem, Chrome 41.0.2224.3 die Antwort löste das Problem. Vielen Dank!
Diego Sucaria
3
In diesem Moment, in dem Sie sich bei einer perfekten Antwort fragen, was Sie getan hätten, wenn es keinen Stackoverflow gegeben hätte!
Jeph
45

Das behebt es für mich:

html, body {height:100%;overflow:auto}
Cooper
quelle
1
Das ist eine sehr unangenehme Frage gegen eine Codebasis von Millionen von Zeilen ... aber hey, es funktioniert !!!!! DANKE
Asad Hasan
Die obige Antwort hat bei mir nicht funktioniert, aber das hat funktioniert. Vielen Dank :)
Charlie-Greenman
Das hat es für mich behoben. Ich hatte dieses Problem schon oft und normalerweise wird es dadurch behoben. Es passiert nur auf einem realen Gerät und jedes Mal frage ich mich, ob es etwas mit dem Wischen ist.
Christian
Dies hat es für mich behoben, während @TJ VanTolls Antwort dies nicht tut
abidibo
Ich verwende absolute Elemente und sie verschwinden zufällig und zeigen weiße Kästchen an, wo sie sein sollten (ihr Platz bleibt erhalten, aber sie erscheinen als weißer Bereich!), Sobald Sie auf eines von ihnen klicken (auch wenn es kein klickbares Element ist), erscheinen sie wieder! es scheint also ein Rendering-Problem zu sein! Ich teste immer noch, nachdem ich dies hinzugefügt habe, aber ich denke, es hat auch für diese absoluten Elemente funktioniert! Sie rendern jetzt richtig, keine Leerzeichen (zumindest noch). Ich habe keine Ahnung, warum das auch geholfen hat! habe eine Weile damit zu kämpfen! Vielen Dank!!
Khaled
19

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);
}
Neo
quelle
8

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;
Cortopy
quelle
1
Diese Lösung hat heute bei mir funktioniert. Chrome 45 kam heraus und meine Website hatte ein Problem (Position: behoben). Das Hinzufügen der (-webkit-transform: translateZ (0) scheint das Problem behoben zu haben. (Ich kenne auch den Z-Index, aber auf meiner Website ist bereits ein Z-Index für die betroffenen Elemente festgelegt.)
Jerome P. Mrozak
-webkit-transform: translateZ(0);habe es für mich getan. Ich musste keinen Z-Index verwenden.
Marco Roy
2

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.

cchana
quelle
2

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

GentiElezaj
quelle
1

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.

Ritesh Jung Thapa
quelle
1

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.

Maslan
quelle
1

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;    
}
Kumar Chandraketu
quelle
1

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.

Amit Gupta
quelle
0

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 :(

Angelika Johansson
quelle
Das lustige Hinzufügen eines versteckten Überlaufs hat den transformZ-Fix tatsächlich für mich zum Laufen gebracht! lol
Primus202
0

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

antoni
quelle