it-swarm.com.de

Fixes Element verschwindet in Chrome

Beim Scrollen auf einer Website, die ich erstellt habe, funktioniert position: fixed mit der CSS-Eigenschaft erwartungsgemäß, sodass eine Navigationsleiste ganz oben auf der Seite angezeigt wird.

Wenn Sie jedoch in Chrome die Links in der Navigationsleiste verwenden, verschwindet manchmal. Normalerweise ist das Element, auf das Sie geklickt haben, immer noch sichtbar, jedoch nicht immer. Manchmal verschwindet das Ganze. Wenn Sie die Maus herumbewegen, wird ein Teil des Elements wiederhergestellt. Wenn Sie mit dem Scrollrad oder den Pfeiltasten einen Mausklick ausführen, wird das Element wieder angezeigt. Sie können es (intermittierend) auf http://nikeplusphp.org sehen - Sie müssen möglicherweise einige Links auf die Links der Links klicken, um zu sehen, dass dies geschieht.

Ich habe auch versucht, mit dem Z-Index und dem Sichtbarkeits-/Anzeigetyp zu spielen, jedoch ohne Erfolg.

Ich stieß auf diese Frage , aber der Fix funktionierte bei mir überhaupt nicht. Scheint ein Webkit-Problem zu sein, da IE und Firefox gut funktionieren.

Ist dies ein bekanntes Problem oder gibt es eine Korrektur, um fixierte Elemente sichtbar zu halten?

Update:

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

68
cchana

Dies ist ein Webkit-Problem, das noch gelöst werden muss. Der Sprung mit JavaScript ist merkwürdig, anstatt den #-URL-Wert zu verwenden. Das Problem wird dadurch nicht verursacht. Um das Problem zu umgehen, habe ich eine JavaScript-Version bereitgestellt, die den Ankerwert verwendet und die absolute Position des Elements mit dieser ID ermittelt und dazu 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 es ist nur so, dass nur Links gesucht werden, die mit einem # beginnen, und nicht je nach a-Tag.

2
cchana

Fügen Sie -webkit-transform: translateZ(0) dem position: fixed-Element hinzu. Dadurch wird Chrome gezwungen, die Hardwarebeschleunigung zu verwenden, um das fixierte Element kontinuierlich zu malen und dieses bizarre Verhalten zu vermeiden.

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

193
TJ VanToll

Das behebt es für mich:

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

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 das Problem beheben, indem der folgende Positionscode (transform: translateZ(0);-webkit-transform: translateZ(0);) dem festen Positionselement hinzugefügt wurde zwingt den Browser, die Hardwarebeschleunigung für den Zugriff auf die Grafikverarbeitungseinheit (GPU) des Geräts zu verwenden, um Pixel zum Fliegen zu bringen. Webanwendungen hingegen werden im Kontext des Browsers ausgeführt, wodurch die Software den Großteil (wenn nicht sogar das gesamte) Rendering ausführen kann, was zu einer geringeren Leistung für Übergänge führt. Das Web hat jedoch aufgeholt, und die meisten Browseranbieter bieten jetzt grafische Hardwarebeschleunigung mithilfe bestimmter CSS-Regeln an.

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

Hinweis: translate3d (0,0,0) wirkt sich nicht auf das aus, was Sie sehen. Es verschiebt das Objekt um 0px in 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);
}
18
Neo

Die oben genannten Optionen haben für mich nicht funktioniert, bis ich zwei der angebotenen Lösungen gemischt habe. 

Durch Hinzufügen des folgenden Elements zu dem festen Element funktionierte es. Grundsätzlich wurde für mich auch Z-Index benötigt:

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

Wenn es nach dem Hinzufügen nicht funktioniert 

-webkit-transform: translateZ (0)

als auch hinzufügen 

benutzerskalierbar = nein

auf Viewport-Meta

quelle hier

es hat für mich funktioniert

2
GentiElezaj

In einem anderen Fall bin ich auf dasselbe Problem gestoßen. Es war wegen der Verwendung derselben ID an mehreren Stellen. Zum Beispiel habe ich #full 2 ​​divs verwendet.

Es scheint, dass Mozilla und I.E. unterstützt die Verwendung derselben ID in mehreren Fällen. Aber Chrom macht das nicht. In meinem Fall reagierte es mit einer Fixierung der festen Elemente. 

Durch das Entfernen der ID wurde das Problem gelöst.

1

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

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

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

1
maslan

Was ist, wenn keiner der oben genannten funktioniert hat? einfacher Fall von klebrigen Kopfzeilen + mobilem Seitenmenü, das den Inhalt schiebt.

Ich versuche einen Weg zu finden, um zu vermeiden, dass fixiertes Element (klebrige Kopfzeile) übersetzt wird, aber in diesem Fall ist nichts eine gute Alternative.

Da es bisher keine Problemumgehung 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

0
antoni

Das hat für mich funktioniert. Fügen Sie die Overflow-Eigenschaft zu Ihrem obersten Container hinzu, der Div oder Form usw. sein kann. 

div, form
{
  overflow:visible;    
}
0

Wenn keine der obigen Antworten für Sie funktioniert hat, stellen Sie sicher, dass Sie kein Dummy wie ich sind und overflow: hidden; auf das feste Element setzen :(

0