Tabelle klebrige Spalten Scroll Bug Chrome

Question

Ich habe eine Tabelle erstellt, wo es ein paar feste Spalten gibt, und der Rest ist Scrollen. Dies geschieht mit einem Wrapper div und der absoluten Position der Position und einem negativen linken Rand der festen Spalten.

Es ist Teil einer komplexen Datentabelle so ist es schwer für mich in jsfiddle neu zu erstellen, aber hier ist ein Link: http://rateshopper.error404.ro/table.html

Das Problem ist, wenn man nur mit dem Scrollen rumspielen und dann die Cursor nach links bewegen. Die festen Spalten springen manchmal einfach aus ihrer Position heraus. Durch das Deaktivieren und erneuten Überprüfen des im Inspektor verbliebenen Rands wird das Problem behoben. Ich weiß nicht, warum es passiert.

Hier ist ein Video in Chrome: http://rateshopper.error404.ro/bug_chrome.mov

Irgendwelche Ideen oder Hilfe wäre sehr dankbar!

Answer 1

Ich konnte das oben gezeigte Aussehen reproduzieren, indem ich die Größe des Fensters drastisch ändere. Ich vermute, dass während der Größenänderung, was auch immer Sie verwenden, um Ihren anfänglichen linken Rand einzustellen, Null zurückgibt. Das Festlegen eines Mindestwerts für den linken Rand würde dieses Problem wahrscheinlich beheben. Wenn Sie das Javascript zur Verfügung stellen können, das diese Positionen berechnet und anwendet, werde ich Ihnen gerne bei der Bearbeitung helfen.

Answer 2

Nun, das funktioniert gut an meinem Ende, Es scheint auf anderen Computern in Ordnung zu sein, aber es scheint nur auf einem bestimmten Macbook passieren, obwohl es das Macbook wäre, dass Sie es erstellt, nehme ich an ...

Wenn dies der Fall ist, müssen Sie Ihren Browser-Cache löschen, obwohl es höchstwahrscheinlich lokal ist, speichert es noch einen Cache. Versuchen Sie das ...

Offenes Chrom. Tippen Sie in der Symbolleiste Ihres Browsers auf das 3-Punkt-Symbol. Tippen Sie auf Verlauf und dann auf Browserdaten löschen. Aktivieren Sie unter "Browserdaten löschen" die Kontrollkästchen "Cookies und Websitedaten" und "Bilder und Dateien im Cache". Verwenden Sie das Menü oben, um die Datenmenge auszuwählen, die Sie löschen möchten. ... Tippen Sie auf Browserdaten löschen.

Versuchen Sie, "ALLES" zu löschen, ich hatte ähnliche Probleme zu diesem Zeitpunkt zuvor während der Entwicklung, und es ist wegen des Caches ich gefunden habe, weiß ich nicht, ob dies Ihr Problem lösen wird, aber ich denke, es wäre der erste Ort ich schaue.

Lesen Sie die letzte Bemerkung über sie Ihren Kunden Mac zu sein, würde ich noch empfehlen, den Cache Wischen, und die Erweiterungen überprüft er in den letzten Kommentar, wie vorgeschlagen haben

Answer 3

Edit:

Bessere fix:

.col-lg-10 { 
    float: right; 
} 

einen Schwimmer auf dem übergeordneten Element der #seriesTableWrapper Einstellung verhindert, dass eine Marge Zusammenbruch auf seine Kinder auftritt.

Hier ist ein auf Margin Kollabieren lesen muss: http://www.seifi.org/css/understanding-taming-collapsing-margins-in-css.html

Der Artikel ist ein bisschen veraltet in Bezug auf die Methoden Marge zu verhindern kollabieren, aber es erklärt, warum und wie es auch passiert.

Modernere Wege Marge Kollabieren zu verhindern: How to disable margin-collapsing?

---

Gefunden ein Fix

Änderung:

#seriesTableWrapper { 
    margin-left: *something*; 
} 

zu:

#seriesTableWrapper { 
    padding-left: *something*; 
} 

einer Marge Zusammenbruch Ausgabe Wahrscheinlich Margen in einigen Fällen kollabieren könnte. Leider erstreckt sich die Bildlaufleiste jetzt über die gesamte Breite.

Da es keine vertikale Scroll ist könnte man einfach eine Tabelle mit horizontalen Scrollen ohne Scrollen und eine Tabelle gemacht hat daneben. Und wenn es vertikales Scrollen gibt, könnten Sie diese beiden Tabellen in ein div mit Überlauf einbinden: auto;