Clipping Mask funktioniert nicht in Firefox aber in jedem anderen Browser

jay-am

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;

}

Road-Runner

Poste doch bitte einen Link zur Seite. Ich weiß nicht ob jemand etwas mit diesem Code-Fragment anfangen kann.

jay-am

Die Seite ist aktuell noch nicht live. Ich wollte erst alle Bugs beheben bevor ich sie live stelle. Dann werde ich jetzt aber eventuell die Reihenfolge ändern

milupo

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

CSS

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

jay-am

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;
}

}

milupo

Zitat von jay-am

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.

Sören Hentzschel

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.

jay-am

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!

milupo

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.

.DeJaVu

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

HTML

<html>
<head>
<title>OUR PLANET MATTERS</title>
<style>


:root {--fs-xxxl: 7rem;}

@media (min-width: 900px)
{
:root {--fs-xxxl: 12rem;}
}

@media (min-width: 1200px)
{
:root {--fs-xxxl: 16rem;}
}

.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("https://images.unsplash.com/photo-1614730321146-b6fa6a46bcb4?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1548&q=80");
background-size: cover;
background-repeat: no-repeat;
background-position: 30% 50%;
letter-spacing: 0.001rem;
}

</style>
</head>
<body>
<section class="clipping-mask-font">
<h2 class="planet__intro--headline">OUR PLANET MATTERS</h2>
</section>
</body>

Alles anzeigen

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.

Sören Hentzschel

An Mozilla gemeldet als:

1800393 - text with background-clip: text and -webkit-text-fill-color: transparent gets truncated

NEW (nobody) in Core - Web Painting. Last updated 2022-11-14.

bugzilla.mozilla.org

Clipping Mask funktioniert nicht in Firefox aber in jedem anderen Browser

Ähnliche Themen

Facebook Seiten springen unkontrolliert beim Scrollen

Firefox-Verhalten mit virtuellen Desktops in Windows 10

Verbesserung userChrome.css (Saubere Programmierung)

Firefox-ESR Problem mit Tracking-Schutz

Kann keinen Text mehr mit der Maus (Stift in meinem Fall) markieren