Aktives Mitglied
Guten morgen allerseits,
ich habe hier ein kleines Problem mit der Darstellung im Firefox, das mir die Nerven raubt.
Und zwar habe ich eine Überschrift, der ich per CSS mit background-clip: text; einen Farbverlauf gegeben habe. Dazu habe ich die Überschrift um -90 Grad gedreht. Soweit funktioniert das auch in allen Browsern problemlos. Da die Überschrift sich aber um den Punkt rechts unten drehen soll, habe ich eine transform-origin: 100% 100%; hinzugefügt.
Und hier streikt der Firefox. Sobald transform-origin: 100% 100%; vergeben wird, dreht er zwar alles um den korrekten Punkt, aber er zeigt nicht mehr den Farbverlauf, sondern nur noch -webkit-text-fill-color: transparent; an. Chrome, Opera und Edge zeigen alles korrekt an. Leider geben die Dev-Tools des FF auch keine Aufschluss darüber, was falsch läuft.
Zur Veranschaulichung hier mal ein Link zu jsFiddle: https://jsfiddle.net/o0aytgzh/
Vielleicht habt ihr ja eine Idee, woran es liegen könnte.
Vorab schonmal besten Dank für eure Hilfe.
ich habe hier ein kleines Problem mit der Darstellung im Firefox, das mir die Nerven raubt.
Und zwar habe ich eine Überschrift, der ich per CSS mit background-clip: text; einen Farbverlauf gegeben habe. Dazu habe ich die Überschrift um -90 Grad gedreht. Soweit funktioniert das auch in allen Browsern problemlos. Da die Überschrift sich aber um den Punkt rechts unten drehen soll, habe ich eine transform-origin: 100% 100%; hinzugefügt.
Und hier streikt der Firefox. Sobald transform-origin: 100% 100%; vergeben wird, dreht er zwar alles um den korrekten Punkt, aber er zeigt nicht mehr den Farbverlauf, sondern nur noch -webkit-text-fill-color: transparent; an. Chrome, Opera und Edge zeigen alles korrekt an. Leider geben die Dev-Tools des FF auch keine Aufschluss darüber, was falsch läuft.
Zur Veranschaulichung hier mal ein Link zu jsFiddle: https://jsfiddle.net/o0aytgzh/
Vielleicht habt ihr ja eine Idee, woran es liegen könnte.
Vorab schonmal besten Dank für eure Hilfe.