Chrome ruckelt beim Scrollen über die Scrollbar

[Yogilein]

Guten Abend,

das habe ich im CSS stehen:

.ta1{background:-webkit-linear-gradient(top,#FFFFCC,#CCCCFF);background:-moz-linear-gradient(top,#FFFFCC,#CCCCFF);background:-o-linear-gradient(top,#FFFFCC,#CCCCFF);background:-ms-linear-gradient(top,#FFFFCC,#CCCCFF);background:linear-gradient(to bottom,#FFFFCC,#CCCCFF);}

Scrolle ich unter Chrome mit der Maus über die Scrollbar geht das Ganze nicht flüssig, sondern es ruckelt deutlich.


Gebe ich dagegen nur das ein, ist das Ruckeln 100 % weg:

.ta1{background:-webkit-linear-gradient(top,#FFFFCC,#CCCCFF);}

Das heißt für mich: Chrome versteht es einmal mit dem Präfix "-webkit" und einmal ohne einem Präfix, wobei es aber nur mit dem Präfix flüssig läuft.

Wie müsste nun mein CSS aussehen, damit Chrome das "-webkit"-Präfix nimmt, aber weiterhin die anderen Browser ebenfalls noch funktionieren? Ich kann ja die Anweisung ohne Präfix nicht weglassen. Die Reihenfolge dabei spielt übrigens keine Rolle. Sobald die Anweisung ohne Präfix vorhanden ist, nimmt Chrome diese und ruckelt.

 

[kkapsner]

Ist das Ruckeln denn auch da, wenn du nur die Anweisung ohne Präfix verwendest?

 

[Yogilein]

Getestet habe ich

einmal nur mit:

.ta1{background:#FFFFCC;border:1px black solid;background:linear-gradient(to bottom,yellow,maroon);}

und einmal nur mit:

.ta1{background:-webkit-linear-gradient(top,yellow,green);}

Ich habe auch mittlerweile den Übeltäter gefunden:

body{
-moz-user-select:none;
-webkit-user-select:none;
-ms-user-select:none;
user-select:none;
background:#a3a3bd url(/Images/HB.jpg);
background-repeat:repeat;
background-attachment:fixed;
cursor:default;
margin:13px;
}

Entferne ich die Fixierung, geht's mit beiden Varianten. Und da Chrome bei beiden Varianten immer die ohne Präfix nimmt, wäre mein Problem gelöst. Ich möchte allerdings nicht auf die Fixierung verzichten.

 

[dertypdernixkan]

Nimm doch das margin raus, dann sollte es laufen.

 

[kkapsner]

Welchen Browser willst du denn unterstützen, der das -webkit-linear-gradient braucht? Safari kann das doch auch inzwischen ohne Präfix.

 

[Yogilein]

Windows-Safari braucht's noch

U.a. deswegen auch mein anderer Thread "Wie alt muss ein Browser sein ...".

Ich habe kein Prob es wegzulassen, aber damit ist mein Problem ja nicht gelöst, da das Ruckeln bei Chrome nur weg ist, wenn es die alleinige Anweisung mit Präfix bekommt.

 

[kkapsner]

Windows-Safari... der ist gut.

Kannst du mal einen Testseite machen, wo wir uns das live ansehen können?

 

[Yogilein]

Sodele, jetzt ein paar (temporäre) Beispiele:

1. Mein aktueller Standard ohne Farbverlauf:
YogiSpiele - Highscore-Tabelle 1

2. Jetzt mit Verlauf ohne Präfix:
YogiSpiele - Highscore-Tabelle 2

3. Jetzt mit webkit-Präfix:
YogiSpiele - Highscore-Tabelle 3

4. Und jetzt ohne Präfix und ohne fixiertem Hintergrund:
YogiSpiele - Highscore-Tabelle 4

5. Und zum Schluss mit und ohne Präfix und wieder mit fixiertem Hintergrund:
YogiSpiele - Highscore-Tabelle 5

Fall 2 läuft nicht geschmeidig, wenn ich über die Scrollbar scrolle. Ich sehe ihn allerdings momentan als einzige Alternative. Somit werde ich wohl auf einen Farbverlauf verzichten müssen.

 

[kkapsner]

Du könntest den Farbverlauf auch "simulieren", indem du jeder Zeile einfach eine etwas andere Farbe gibst.

 

[Yogilein]

Windows-Safari... der ist gut.

Obwohl, ich nehme diesen Uralt-Browser noch gerne zum Testen, da er irgendwie sensibel reagiert und ich dadurch schon so manchen Fehler entdecken konnte.

Aber, was soll ich sagen: Aktuell ruckelt bei mir auch Chrome mit Präfix (jetzt verstehe ich gar nichts mehr). Auf jeden Fall ist damit der Verlauf gestorben.

Du könntest den Farbverlauf auch "simulieren", indem du jeder Zeile einfach eine etwas andere Farbe gibst.

Ob du's glaubst oder nicht, die Idee hatte ich auch schon, aber 103 Klassen definieren, wobei eine Zeile in meiner Tabelle dynamisch eingeblendet wird (an dieser Stelle wird dann der simulierte Verlauf nicht mehr ganz stimmen) ... Ne, dann lasse ich es lieber. Aber es könnte funktionieren. Ich habe jetzt einfach den Hintergrund transparent gelassen und jede Zeile einzeln eingefärbt (testweise immer mit der gleichen Farbe) und es ruckelt nicht mehr.

 

[kkapsner]

Du kannst auch mit nth-child arbeiten (sollte man sogar dynamisch per JS erzeugen können). Dann kannst du Zeilen einfügen/entfernen, wie du willst.

 

[Yogilein]

OK, wieder etwas gelernt. Ich werde es ausprobieren.