Clipping Mask funktioniert nicht in Firefox aber in jedem anderen Browser

  • Firefox-Version
    Firefox 106.0.5
    Betriebssystem
    Mac

    Hallo zusammen, ich habe ein Problem mit meiner Webseite. Ich habe die Headlines mit einer Clipping Mask programmiert so dass hinter dem Text ein Bild zu sehen ist, wenn man über die Seite scrollt. Das funktioniert ganz wunderbar auf jedem Browser - bis auf Firefox. Hier wird die Schrift auf der Index Seite viel dünner angezeigt und das Bild im Hintergrund abgeschnitten. Auf allen anderen Seiten sieht man die Headlines überhaupt nicht obwohl ich den exact selben code verwende (und es auf den anderen Browsern funktioniert). Ich habe bereits mehrere Senior Programmierer über den Code schauen lassen. Keiner konnte mir helfen. Das hier ist meine letzte Idee. Ich hoffe hier hatte jemand bereits ein ähnliches Problem und kennt eventuell einen Lösungsansatz. Ganz lieben Dank im Voraus und einen schönen Sonntag :)

    HTML

    <section

    class="clipping-mask-font"

    >

    <h2 class="planet__intro--headline">OUR PLANET MATTERS</h2>

    </section>

    CSS

    .clipping-mask-font h2 {

    font-weight: 900;

    font-size: var(--fs-xxxl);

    line-height: 0.8;

    position: relative;

    background-clip: text;

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-attachment: fixed;

    padding: 0;

    }

    .planet__intro--headline {

    background-image: url("../../images/website/index/earth.png");

    background-size: cover;

    background-repeat: no-repeat;

    background-position: 30% 50%;

    letter-spacing: 0.001rem;

    }

  • Wo ist denn die CSS-Variable fs-xxxl definiert und welchen Wert hat sie?

    CSS
    font-size: var(--fs-xxxl);

    Übersetzer für Obersorbisch und Niedersorbisch auf pontoon.mozilla.org u.a. für Firefox, Firefox für Android, Firefox für iOS, Firefox Klar/Focus für iOS und Android, Thunderbird, Pootle, Django, LibreOffice, LibreOffice Onlinehilfe, WordPress

  • Die Schriftgröße habe ich im CSS für die Fonts für die unterschiedlichen Media Queries festgelegt.

    :root {

    --fs-xxxl: 7rem;
    }


    Media (min-width: 900px) {

    :root {

    --fs-xxxl: 12rem;
    }

    }


    Media (min-width: 1200px) {

    :root {

    --fs-xxxl: 16rem;
    }

    }

  • ie Schriftgröße habe ich im CSS für die Fonts für die unterschiedlichen Media Queries festgelegt.

    OK. Du hattest das erst nicht angegeben.

    Übersetzer für Obersorbisch und Niedersorbisch auf pontoon.mozilla.org u.a. für Firefox, Firefox für Android, Firefox für iOS, Firefox Klar/Focus für iOS und Android, Thunderbird, Pootle, Django, LibreOffice, LibreOffice Onlinehilfe, WordPress

  • Hallo,

    zwecks Reproduzierbarkeit wäre es in jedem Fall sinnvoll, eine vollständige Testumgebung zu erhalten. Das HTML kann so ja beispielsweise auch nicht vollständig sein, ohne Doctype und was noch dazu gehört. Auch die Grafik fehlt hier. Du könntest beispielsweise https://codepen.io/pen/ nutzen, um alles bereitzustellen.

  • Entschuldigung, das hatte ich vergessen :/


    Vielen Dank für eure Hilfe. Ich werde die Webseite nun doch schon live stellen. Das wird die Hilfe wohl leichter machen. Ich muss allerdings erst noch ein Hosting beantragen. Ich poste den Link wenn dann alles live ist. Habt noch einen schönen Sonntag! :)

    Einmal editiert, zuletzt von jay-am (13. November 2022 um 15:08) aus folgendem Grund: Ein Beitrag von jay-am mit diesem Beitrag zusammengefügt.

  • jay-am Mal noch etwas Kosmetisches und auch Übersichtlicheres: Es wäre gut, wenn du in Zukunft Code-Kästen nutzt, um deine Codes hier einzustellen. Mache dazu Folgendes:

    1. Klicke in der Symbolleiste des Antwortfenster auf das Symbol </>

    2. Es wird ein leerer Kasten mit dem Wort Quellcode eingefügt

    3. Klicke auf das Wort Quellcode. Es wird das Fenster Code bearbeiten angezeigt.

    4. Klicke im Fenster auf den kleinen Pfeil bei Syntax-Hervorhebung

    5. Wähle dort den Eintrag für die Syntax-Hervorhebung aus (oben wären das HTML und CSS)

    6. Klicke dann auf die Schaltfläche Speichern

    7. Das Fenster schließt sich und du bist wieder im Antwortfenster, im Code-Kasten

    8. Füge dann deinen Code in den entsprechenden Code-Kasten ein (also getrennte Code-Kästen für HTML und CSS)

    9. Wenn du jetzt weiter schreiben willst, passe auf, dass du auch den Code-Kasten verlässt und außerhalb des Code-Kastens weiter schreibst.

    Nachdem du deinen Beitrag abgesendet hast, hast du dann schön gestaltete Codes in den Code-Kästen.

    Übersetzer für Obersorbisch und Niedersorbisch auf pontoon.mozilla.org u.a. für Firefox, Firefox für Android, Firefox für iOS, Firefox Klar/Focus für iOS und Android, Thunderbird, Pootle, Django, LibreOffice, LibreOffice Onlinehilfe, WordPress

  • Wer sich eine HTML-Datei (Schnellschuss) erstellen will:

    Das Bild ist ein Fundstück aus dem Web, kann jeder was eigenes nutzen.

    Ja, in Edge wird der Text bei fixem Hintergrund gescrollt - bei Firefox ist der Text mit Bild statisch, aber der Rahmen wandert nach oben. Alles jedoch bei unzureichender Höhe oder Breite, bei Vollbild passiert nichts, weil ich nichts zu Scrollen habe.

    Entweder ist das CSS falsch, oder Firefox kann es tatsächlich so nicht richtig darstellen, dafür kenne ich mich zu wenig damit aus.

    Wir sind keine Beschwerdestelle, hier gibt es nur Lösungen! Meine Glückszahl hier: 93.