bitte vergesst meine beiden PN im Vorfeld auf diesen Post
Zu Spät, habe Dir schon geantwortet. Vergess Du diese PN.
Wenn ich nun die Scrollbar wieder etwas breiter bekommen könnte, wäre es prima.
Darum werde ich mich noch kümmern, ist machbar!
Aber ich mache jetzt erst einmal nichts mehr und warte auf den Firefox 143!
Mozilla ist ja fleißig am Basteln und es ändert sich des Öfteren was.
1. Firefox 143 oder 144
2. Skript Version 2.0.8_final.
3. Symbol wird angezeigt, aber die Farbwerte werden nicht übernommen
Das Symbol, also der Pfeil, bleibt schwarz.
Zu Deiner Erklärung.
Das kann so aber nicht sein!
Der Firefox 142 hat mit SVG ohne fill-opacity='context-fill-opacity' im Code, absolut keine Probleme.
Diese traten erst mit dem Firefox 143 bzw. 144 auf.
Für ein Cacheproblem spricht, benenne ich die betroffene Datei einfach um, ist das Problem nicht mehr vorhanden!
Dieser Test steht noch mal aus, aber so war es bei mir!
Deshalb vermute ich eben ein Cacheproblem!
Nach ganz viel Recherche im Netz komme ich zu der Überzeugung, dass wenn die Grafiken zwar angezeigt,
aber die definierte Farbe nicht übernehmen, dass das ein Cacheproblem ist!
Wer davon betroffen ist, sollte betreffende SVG's mal umbenennen, einfach eine Zahl anhängen,
z.B. aus up.svg => up_1.svg machen.
Und nicht vergessen, auch im Skript den Aufruf der Symbole ändern.
Wichtig! Unbedingt den Cache leeren.
Speravir Hast Du Dir das schon mal angeschaut?
Hättest Du eine Idee?
Verstehe ich Dich richtig?
Wenn ich z.B. Aris Skript nehme:
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'>
<path fill='context-fill' fill-opacity='context-fill-opacity' d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/>
</svg>und ändere es so :
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'>
<path fill='context-fill' fill-opacity='1' d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/>
</svg>könnte das schon den Fehler beseitigen?
Was mir nur nicht klar dabei ist, warum dann der Fehler nur bei einigen Usern auftritt, aber bei vielen anderen nicht.
Und was würde das für das CSS bedeuten?
Dort könnte ja dann die Zeile mit fill-opacity: 1 !important; gelöscht werden.
Aber das Ganze würde noch nicht erklären, warum das inline-svg ohne Probleme zu machen funktioniert,
da in der ganzen Zeile nicht einmal fill-opacity=xxx auftaucht!
Bei der komplizierten Verschachtelung in deinem JS/CSS Monster
steig ich da aber nicht durch; die Pfeile kann ich eh nicht sehen, ist aber auch ein Mac Dingens.
Es ist nicht komplizierter als Aris Skript!
Nagut, scheinbar ist es doch komplex.
Aber ich dachte, ich hätte genug Kommentare eingefügt, damit ein jeder es sich seinen Wünschen anpassen kann.
Und die Bezeichnungen der Variabeln sind doch nun auch selbsterklärend, oder etwa nicht?
weil der Standartwert im Icon auf fill-opacity = 1 gesetzt wird,
Das erkläre mir anhand der Beispiele, denn ich verstehe Deine Aussage gerade nicht.
Ach und noch etwas Erheiterndes,
das inline-svg funktioniert anstandslos!
Da brat mir doch einer einen Storch.
scrollbar[vertical] > scrollbarbutton[type="decrement"] {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='${custom_scrollbar_arrows_color}' %3E%3Cpath d='m7.247 4.86-4.796 5.481c-.566.647-.106 1.659.753 1.659h9.592a1 1 0 0 0 .753-1.659l-4.796-5.48a1 1 0 0 0-1.506 0z'/%3E%3C/svg%3E ") !important;
}Das CSS hat keine Wirkung, wenn im svg code fill-opacity nicht gesetzt ist: fill-opacity="context-fill-opacity".
Wenn nicht gesetzt im svg, sollte fill-opacity im CSS aber eigentlich nur ignoriert werden.
Das kann aber so nicht stimmen.
In Aris Symbolen, ... ach was, ich poste den Code!
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'>
<path fill='context-fill' fill-opacity='context-fill-opacity' d='m3.86 8.753 5.482 4.796c.646.566 1.658.106 1.658-.753V3.204a1 1 0 0 0-1.659-.753l-5.48 4.796a1 1 0 0 0 0 1.506z'/>
</svg>Die Vorschau im Explorer unter W10, den musste ich patchen, damit er überhaupt SVG anzeigen kann, funktioniert nicht.
Auf meinem Rechner macht das aber nichts, die Symbole werden eingebunden und können per CSS eine Farbe zugewiesen bekommen.
Nun zu "meinen" Symbolen!
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="context-fill">
<path d="m7.247 4.86-4.796 5.481c-.566.647-.106 1.659.753 1.659h9.592a1 1 0 0 0 .753-1.659l-4.796-5.48a1 1 0 0 0-1.506 0z"/>
</svg>Wie man sehen kann fehlt da der Eintrag fill-opacity='context-fill-opacity'.
Dennoch funktioniert es!
Im Firefox 142 sowie auch im Firefox 144.
Und nun das Kuriose!
Beide SVG-Grafiken funktionieren eben NICHT auf Endors System!
Deine .svg-Icons haben kein fill-opacity.
Richtig, aber das wird ja im CSS nachgeholt!
background-image: url("${ProfileDirectory}/Chevron-up_orange.svg") !important;
-moz-context-properties: fill, fill-opacity;
fill: ${cs_scrollbar_arrows_hover_color} !important;
fill-opacity: 1 !important;
}Es macht mir kirre, dass es auf dem einen Rechner richtig funktioniert und auf dem anderen nicht!
Was mich noch mehr irritiert, im alten Skript welches für den FF bis 142 war/ist, gab/gibt es dieses Problem nicht!
Erst ab Firefox 143 und dem neuen Skript treten diese Probleme auf.
Ich werde mal eine abgespeckte Version schreiben, ohne den Firlefanz und den ganzen Einstellungen.
So wie ich das sehe gibt es wohl 2 Probleme hier
1: Gar keine Icons bei z.B. Boersenfeger, bzw. nur bestimmte Icons bei Endor.
2: .svg Grafiken übernehmen die Farbe aus dem Skript nicht.
Ja, scheint so zu sein.
Wobei zu "1", so denke ich, es einfach Kopierfehler sind.
So war es zumindest zu Anfang bei Endor, so meine Vermutung
In der Hektik von gestern ist mit das wohl auch unterlaufen.
Zu "2", das ist echt merkwürdig, und ich kann mir da absolut keinen Reim drauf machen.
Könnte daran liegen?:
svg.context-properties.content.enabled steht auf false
Habe es soeben geprüft!
Steht im 142 sowie in der Nightly auf true.
Daran wird es wohl nicht liegen, denn ich hatte das Problem ja auch (2: .svg Grafiken übernehmen die Farbe aus dem Skript nicht.)
Boersenfeger Mit welchem Skript klappt es bei Dir im FF 142?
Und mit welchen SVG-Grafiken?
Könnte daran liegen?:
svg.context-properties.content.enabled steht auf false
Werde ich später zu Hause nachschauen und testen.
Danke
2002Andreas Kannst Du gerne in ein eigenes Thema auslagern.
Es ist schon merkwürdig!
Wären manche SVG-Grafiken bei vielen Nutzern ohne Probleme angezeigt werden,
habe andere Nutzer damit Probleme.
Zuerst dachte ich, es wären copy-fehler oder ich hätte irgendwas falsch in den Skript,
welches die Grafiken aufruft, eingestellt.
Aber nein, der Fehler liegt an irgendwas anderem!
Nur woran?
Ich habe Endor ein fertiges, nach seinen Wünschen eingestelltes Skript geschickt.
Mit seinen Grafiken funktioniert es auch,
kein Wunder, die Farbwerten sind in den Grafiken definiert!
Ich habe ihm "meine" SVG-Grafiken geschickt, die einwandfrei bei mir die Farben, die im Skript definiert werden,
ohne mucken und ohne Probleme übernehmen.
Und bei Endor, .... nicht!
Ich verstehe das nicht, hatte auch solche Probleme, die sich aufgelöst haben, nur ich weiß nicht, wo
oder an was der Fehler lag.
Hat jemand eine Idee? Sören Hentzschel Du vielleicht?
Beispiel, Aris Symbole funktionieren nun bei mir, aber bei Endor offensichtlich nicht!
Er hat nichts am Skript verändert, nur die Grafiken ausgetauscht, überschrieben.
D.h. die Namen haben sich nicht verändert!
Doch bei Endor übernehmen sie die Farbwerte aus dem Skript nicht.
Das ist doch kurios!
Version 208 funktioniert hier nun einwandfrei.
Naja, noch nicht so wirklich richtig!!
Lass uns da weiter machen, wo wir aufgehört haben,
danach melde ich mich bei Boersenfeger , versprochen.
Wenn die Probleme bei Endor und Boersenfeger beseitigt sind,
wird es ein kleines Tut geben, was wir gemacht haben.
milupo Stimmt. Ich wechselte so oft zwischen den verschiedenen Firefoxversionen hin und her, dass ich irgendwie die Übersicht verloren habe.
Das von mir veröffentliche Skript Version 2.0.8 ist aber richtig, oder?
Endor siehe ^ (über Dir)
Ich bleibe mal bei Version Scrollbar.v2.0.7.js
Bitte schick die mir mal per PN.
Also ich weiß nicht weiter!
Bei mir funktioniert das Skript wie ich es mir gedacht habe!
Bei anderen wohl auch.
Wenn Du Endor die Pfeile nutzen möchtest, nutze Option "1"
und ändere die Farben nach Anleitung.
// only for 'custom_scrollbar_arrows_version = 1'
const custom_scrollbar_arrows_color = "%23bfbfbf"; // default: custom_scrollbar_arrows_color = "grey"; / # ==> %23 e.g. #33CCFF ==> %2333CCFF
const custom_scrollbar_arrows_hover_color = "%23ffae00"; // default: custom_scrollbar_arrows_hover_color = "orange"; # ==> %23Welche 1.Farbe und welche 2.Farbe?
Die Farbwerte bitte.
// CUSTOM SCROLLBAR SETTINGS ("custom_scrollbar_" --> "cs_")
const custom_scrollbars = true; // default: custom_scrollbars = true
const custom_scrollbar_arrows = true; // default: custom_scrollbar_arrows = true
const custom_scrollbar_arrows_version = 1; // default: custom_scrollbar_arrows_version = 1
// 1 ==> SVG arrows as code: might not work on some pages
// 2 ==> SVG arrows as files: placed inside 'chrome\icons' folder
// only for 'custom_scrollbar_arrows_version = 1'
const custom_scrollbar_arrows_color = "%23bfbfbf"; // default: custom_scrollbar_arrows_color = "grey"; / # ==> %23 e.g. #33CCFF ==> %2333CCFF
const custom_scrollbar_arrows_hover_color = "%23ffae00"; // default: custom_scrollbar_arrows_hover_color = "orange"; # ==> %23
// only for 'custom_scrollbar_arrows_version = 2'
const cs_scrollbar_arrows_color = "#1e90ff" // "#7c7c7c" "#bfbfbf"
const cs_scrollbar_arrows_hover_color = "#ffa600"Also, hier wird die Option ausgewäht!
const custom_scrollbar_arrows_version = 1;
wenn 1
dann hier die Farben =>
// only for 'custom_scrollbar_arrows_version = 1'
const custom_scrollbar_arrows_color = "%23bfbfbf"; // default: custom_scrollbar_arrows_color = "grey"; / # ==> %23 e.g. #33CCFF ==> %2333CCFF
const custom_scrollbar_arrows_hover_color = "%23ffae00"; // default: custom_scrollbar_arrows_hover_color = "orange"; # ==> %23wenn 2
dann eben hier die Farben =>
// only for 'custom_scrollbar_arrows_version = 2'
const cs_scrollbar_arrows_color = "#1e90ff" // "#7c7c7c" "#bfbfbf"
const cs_scrollbar_arrows_hover_color = "#ffa600"Und die Symbole heißen wie?
Und stimmt die Bezeichnung dann auch mit denen im Skript über ein?
Ich habe hier keine Probleme.
Hier noch einmal die Symbole, in denen die Farbe nicht festgelegt ist.
Chevron.zip
und
Pfeile.zip
Ach, und stimmt das nun mit dem Pfad?
// PROFILE PHATH "CALCULATE"
let ProfileDirectory = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir, 'chrome', 'icons'));background-image: url("${ProfileDirectory}/Chevron-up.svg") !important;oder
background-image: url("${ProfileDirectory}/Pfeil-hoch.svg") !important;Je nachdem, welches SVG Du nutzt.
Und immer daran denken, cache löschen!
Ich bin zu der Überzeugung gekommen, dass das Flüchtigkeitsfehler beim Umbenennen der Dateien,
bei Veränderungen im Skript oder was auch immer sein müssen.
Trag doch einfach die gewünschten Farben in den Zeilen =>
// only for 'custom_scrollbar_arrows_version = 2'
const cs_scrollbar_arrows_color = "#bfbfbf" // "#7c7c7c"
const cs_scrollbar_arrows_hover_color = "#ffa600"ein und ändert auch die Bezeichnungen hier =>
scrollbar[orient="vertical"] scrollbarbutton[type="decrement"] {
background-image: url("${ProfileDirectory}/Pfeil-hoch.svg") !important;
-moz-context-properties: fill, fill-opacity;
fill: ${cs_scrollbar_arrows_color} !important;
fill-opacity: 1 !important;
}
scrollbar[orient="vertical"] > scrollbarbutton[type="increment"] {
background-image: url("${ProfileDirectory}/Pfeil-runter.svg") !important;
-moz-context-properties: fill, fill-opacity;
fill: ${cs_scrollbar_arrows_color} !important;
fill-opacity: 1 !important;
}
scrollbar[orient="horizontal"] > scrollbarbutton[type="decrement"] {
background-image: url("${ProfileDirectory}/Pfeil-links.svg") !important;
-moz-context-properties: fill, fill-opacity;
fill: ${cs_scrollbar_arrows_color} !important;
fill-opacity: 1 !important;
}
scrollbar[orient="horizontal"] > scrollbarbutton[type="increment"] {
background-image: url("${ProfileDirectory}/Pfeil-rechts.svg") !important;
-moz-context-properties: fill, fill-opacity;
fill: ${cs_scrollbar_arrows_color} !important;
fill-opacity: 1 !important;
}
/* Hover */
scrollbar[orient="vertical"] > scrollbarbutton[type="decrement"]:hover {
background-image: url("${ProfileDirectory}/Pfeil-hoch.svg") !important;
-moz-context-properties: fill, fill-opacity;
fill: ${cs_scrollbar_arrows_hover_color} !important;
fill-opacity: 1 !important;
}
scrollbar[orient="vertical"] > scrollbarbutton[type="increment"]:hover {
background-image: url("${ProfileDirectory}/Pfeil-runter.svg") !important;
-moz-context-properties: fill, fill-opacity;
fill: ${cs_scrollbar_arrows_hover_color} !important;
fill-opacity: 1 !important;
}
scrollbar[orient="horizontal"] > scrollbarbutton[type="decrement"]:hover {
background-image: url("${ProfileDirectory}/Pfeil-links.svg") !important;
-moz-context-properties: fill, fill-opacity;
fill: ${cs_scrollbar_arrows_hover_color} !important;
fill-opacity: 1 !important;
}
scrollbar[orient="horizontal"] > scrollbarbutton[type="increment"]:hover {
background-image: url("${ProfileDirectory}/Pfeil-rechts.svg") !important;
-moz-context-properties: fill, fill-opacity;
fill: ${cs_scrollbar_arrows_hover_color} !important;
fill-opacity: 1 !important;
}Und nutzt diese Symbole => Pfeile.zip
#1e90ff für das Blau
#d3d3d3 für das helle Grau
#ffa500 für Orange
Bin gerade nicht zu Hause.
Werde der Sache noch auf die Spur kommen.
Habt Geduld.