Wirklich seltsame "Neuzeichnen Verhalten" mit Anker Links, Twitter Bootstrap Fixed-Navbar und Affix-Plugin

Question

Ich habe ein extrem seltsames Verhalten, wenn Sie Twitter Bootstrap Affix-Plugin, feste Navbar und Anker-Links zusammen. Ich werde versuchen, mein Problem zu erklären, aber es ist schwierig, es in Worte zu fassen, also bitte vergib mir, wenn ich nicht am klarsten bin.

Ich habe eine navbar-fixed-top am Anfang meiner Seite. Darunter habe ich eine .container div. Inside habe ich zwei div.spans (span4 und span8). Inside span4 ist ein div.well, der die affix-top Klasse angewendet hat (so bekommt es eine feste Position und "klebt" wo es ist). In meinem span8 habe ich eine Menge Inhalt.

Innerhalb der well div gibt es eine nav-list. Diese Liste wird mit li/a Elementen gefüllt, die auf Elementen in der span8 basieren (ich habe ein kleines Skript, das das tut). Die Links sind Anker, also verweisen sie auf Elemente auf der Seite (#myId, #myIdTwo, usw.). All das funktioniert wunderbar. Meine Liste ist da, die Links sind anklickbar, sie bringen mich zu meinen Elementen. Groß.

Allerdings nicht großartig. Manchmal, wenn ich auf einen der Links klicke, gehe ich zu meinem Anker in der span8, aber die Seite scheint nicht korrekt zu aktualisieren. Ich sehe manchmal seltsame weiße "Boxen". Oder der Inhalt innerhalb des Bereichs wird teilweise über dem festen nav-header angezeigt. Manchmal verschwindet die Hälfte der nav-list .. aber dann kommt zurück (Art von), wenn ich meine Maus drumherum bewegen. Wie Sie es in einigen alten Windows-Anwendungen gesehen haben, die stecken geblieben sind.

Sie können sich hier sehen: http://jaylach.github.com/lutra. Möglicherweise müssen Sie einige der Navigationslinks ein paar Mal anklicken, bevor Sie das Problem sehen.

Ich habe den ganzen Tag damit gekämpft und ich kann es nicht für mein Leben herausfinden. Ich habe die Affixe herausgenommen, ich habe die feste Top Navbar herausgenommen, ich habe meine z-index herausgenommen. Ich kann es einfach nicht herausfinden.

Hat jemand irgendwo einen Hinweis darauf, was das verursachen könnte? Ich würde wirklich jeden Ratschlag schätzen, den Sie geben könnten.

Vielen Dank im Voraus!

Answer 1

Dies ist ein WebKit-Fehler.

hinzufügen -webkit-transform: scale3d(1,1,1); sowohl auf .navbar-fixed-top und .affix

beide Stile in bootstrap.min.css definiert sind. So überschreiben Sie diese 2 Arten in Ihrem main.css als:

.affix,.navbar-fixed-top { 
-webkit-transform: scale3d(1,1,1); 
}