Antworten auf deine Fragen:
Neues Thema erstellen

Problem mit background-clip: text und transform-origin beim Firefox

dn3d_fanboy

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.
 

dn3d_fanboy

Aktives Mitglied

Sorry, für den Doppelpost.

Ich konnte es nach langem Herumraten lösen:
der FF hat bei transform-origin: 100% 100%; im Zusammenhang mit dem background-clip bei den zweiten 100% wohl ein Problem. Stelle ich es auf transform-origin: 100% 99.9999%; um, funktioniert es auch da.

Vielleicht hat von euch ja einer eine Ahnung, warum das so ist. Bei Google ließ sich für mich leider nichts dazu finden.

Hier noch der Link mit meiner Lösung: https://jsfiddle.net/o0aytgzh/1/
 

Orlandoo

Nicht mehr ganz neu hier

Es sieht so aus, als wäre es ein Bug im Firefox. Einfach ausgedrückt: Berechnungen mit Fließkommazahlen sind für alle Computer-Prozessoren immer wieder problematisch, da treten Rundungsfehler auf. Dann muss der Programmierer tricksen, um diese zu beseitigen.
Mozilla würde sich über einen Bug-Report sicher freuen :)
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.565
Beiträge
1.538.067
Mitglieder
67.488
Neuestes Mitglied
Andrew56524
Oben