CSS Property backdrop-filter funktioniert nicht

DavVader

Ich bin gerade dabei just4fun eine kleine Website zu programmieren. Dabei habe ich im CSS dne backdrop-filter verwendet. Im Firefox-Browser wird dieser aber nicht richtig angezeigt. Als ich es z.B. in Chrome probiert habe hat es funktioniert. An was könnte das liegen?

Vielen Dank im Voraus für jede Hilfe

milupo

Ich habe damit noch nicht gearbeitet, aber vielleicht hilf dir folgende Seite weiter:

backdrop-filter - CSS: Cascading Style Sheets | MDN

The backdrop-filter CSS property lets you apply graphical effects such as blurring or color shifting to the area behind an element. Because it applies to…

developer.mozilla.org

DavVader

Auf dieser Seite war ich schon. Dort steht, dass es ab Firefox Version 103 kompatibel ist. In meiner Firefox Version 113 funktioniert es aber trotzdem nicht

milupo

Du hast auch dem entsprechenden Element bzw. Hintergrund eine Transparenz zugewiesen? Vielleicht liegt dein Fehler auch woanders, z. B. im Code davor?

.DeJaVu

Man müsste schon das gesamte CSS dazu sehen, ideal mit einer vollständigen Beispielseite.

Dharkness

Zitat von DavVader

In meiner Firefox Version 113 funktioniert es aber trotzdem nicht

Dann ist in Deinem HTML bzw. in Deinem CSS ein Fehler.

DavVader

Zitat von Dharkness

Zitat von DavVader

In meiner Firefox Version 113 funktioniert es aber trotzdem nicht

Dann ist in Deinem HTML bzw. in Deinem CSS ein Fehler.

das kann nicht sein, weil in anderen browsern funktioniert es

milupo

Zitat von DavVader

das kann nicht sein, weil in anderen browsern funktioniert es

Es gibt Unterschiede zwischen den Browsern. Also stelle deinen Code hier ein.

Zitronella

Es kann durchaus sein, dass andere Browser Fehler ignorieren und es deshalb wie gewünscht aussieht.

Bedenke: ein gewünschtes Aussehen muss nicht bedeuten dass es fehlerfrei/korrekt ist!

evtl. hilft dir das zur Überprüfung

Der W3C CSS Validierungsdienst

The W3C Markup Validation Service

DavVader

Zitat von Zitronella

Es kann durchaus sein, dass andere Browser Fehler ignorieren und es deshalb wie gewünscht aussieht.
Bedenke: ein gewünschtes Aussehen muss nicht bedeuten dass es fehlerfrei/korrekt ist!
evtl. hilft dir das zur Überprüfung
https://jigsaw.w3.org/css-validator/
https://validator.w3.org/

laute diesen tools wurden keine fehler gefunden

Zitronella

Dann kann uns das nicht weiter helfen ohne den Code zu sehen (worum du schon mehrmals gebeten wurdest)

milupo

Es geht hier nicht nur um Fehler, sondern um unterschiedliches Verhalten der Browser.

DavVader

HTML

  <body>
 <div class="wrapper">
        <section class="header">
            <h1>Hangman</h1>
            <p class="description">Auf dieser Website kannst du das beliebte Spiel "Hangman" kostenlos spielen.<br><br> Falls du das Spiel nicht kennst hier die Regeln:</p>
            <ol class="rules">
                <li>Im Hintergrund wird ein zufälliges Wort ausgewählt das du erraten musst</li>
                <li>Raten einen beliebigen Buchstaben im dafür vorgesehenen Feld</li>
                <li>Das Spiel zeigt dir an ob und wie oft der Buchstabe im gesuchten Wort vorhanden ist</li>
                <li>Wenn er nicht im gesuchten Wort vorkommt verbrauchst du ein Leben</li>
                <li>Das Spiel endet wenn du das Wort erraten hast oder deine Leben aufgebraucht sind</li>
            </ol>
        </section>

        <div class="content">
           
                <div class="word">
                    <ul id="wordLetters">

                    </ul>
                </div>

                <div class="guess">
                    <label for="guess">Hier gewünschten Buchstaben eintragen: </label>
                    <input id="guess" type="text" maxlength="1" placeholder="Buchstaben eintragen">
                    <button id="raten" onclick="guess(document.getElementById('guess').value.toUpperCase())">Raten</button>
                </div>
           
           
                <div class="progess">
TESTPROGRESS<br><br>
                    <p id="testen1"></p>
                    <p id="testen2"></p>
                    <p id="testen3"></p>
                </div>
           
        </div>

   </div>



HTML-Code

html{
    box-sizing: border-box;
    height: 100%;
}

body{
    align-items: center;
    background: linear-gradient(320deg, #eb92eb, #ffef78, #63c9b4);
    display: flex;
    font-family: 'Dosis', sans-serif;
    height: inherit;
    justify-content: center;
}

.wrapper{
    backdrop-filter: blur(5.5px);
    -webkit-backdrop-filter: blur(5.5px);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(35, 35, 35, 0.1);
    color: #232323;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    background: rgba(255, 255, 255, 0.30);
    border: 1px solid rgba(255, 255, 255, 0.34);
    flex-basis: 400px;
    height: auto;
   
    padding: 20px 35px;
}

.header{
    backdrop-filter: blur(5.5px);
    -webkit-backdrop-filter: blur(5.5px);
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(35, 35, 35, 0.1);
    border-radius: 12px;
    box-shadow: 0 4px 30px rgba(35, 35, 35, 0.1);
    color: #232323;
    padding: 15px;
    width: 1000px;

}

.header h1{
    font-size: 50px;
}

.content{
    backdrop-filter: blur(5.5px);
    -webkit-backdrop-filter: blur(5.5px);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(35, 35, 35, 0.1);
    border-radius: 12px;
    box-shadow: 0 4px 30px rgba(35, 35, 35, 0.1);
    color: #232323;
    padding: 15px;
    width: 1000px;
    height: 500px;
    justify-content: space-between;
    align-items: baseline;
    margin: 20px 0;
    box-sizing: border-box;
}

Alles anzeigen

Edit 2002Andreas
Text in Klammercode </> gesetzt.

milupo

Warum hast du backdrop-filter zweimal in der gleichen Klasse .wrapper und außerdem -wekbkit-backdrop-filter, ebenfalls zweimal, der spezifisch für Chrome ist. Sollte backdrop-filter nicht auch für Chrome gelten? Wenn nicht, sind die Browser schon mal nicht vergleichbar.

Zitronella

DavVader Bitte benutze künftig den Code Button für Code. Danke

DavVader

ist der -wekbkit-backdrop-filter nicht nur speziell für safari? oder habe ich das falsch verstanden

dass backdrop-filter zweimal in der gleichen klasse war habe ich behoben hat aber das problem nicht verändert

Zitat von Zitronella

DavVader Bitte benutze künftig den Code Button für Code. Danke

ja habe ich gerade gemerkt tut mir leid ist mein erster post

milupo

Zitat von DavVader

ist der -wekbkit-backdrop-filter nicht nur speziell für safari?

Meines Wissens auch für Chrome. Aber für Safari ist es wohl möglich auch -apple- als Präfix zu verwenden. Probiere das mal aus. Aber Chrome akzeptiert auch die Standardeigenschaft und ignoriert dann vielleicht -webkit-backdrop-filter. Probiere es jetzt mal aus, nachdem du die Duplikate entfernt hast.

.DeJaVu

Zitat von milupo

Warum

Bei doppelten Angaben wird der letzte genommen. Aber das passiert vielen hier im Forum, wenn der Code nicht weiter kontrolliert wird. Selbst Stylus bemerkt das als einfachstes Hilfsmittel.

Sieht irgendwie gleich aus, links Edge, rechts Firefox. Entweder beides richtig oder beides falsch.

Zitat von DavVader

speziell für safari

Unter bzw für Windows? Hoffnungslos veraltet und daher obsolete für eine Gesamtbetrachtung unter Windows - anders bei macos.

Dharkness

Zitat von .DeJaVu

Sieht irgendwie gleich aus, links Edge, rechts Firefox. Entweder beides richtig oder beides falsch.

Also hier unter Firefox, Vivaldi, Edge und Chromium das gleiche Ergebnis, es ergibt sich immer das gleiche Aussehen.

Hier jetzt mal nur Fx.

DavVader

ich habe jetzt die duplikate und die -webkitzeilen entfernt. Das Problem bleibt aber das gleiche

Vielleicht funktionieren auch meine Augen nicht richtig aber ich erkenne hier einen eindeutigen Unterschied

(In diesem Fall Firefox und Chrome)

Die einzige Idee die ich hätte wäre, dass es nicht am backdrop-filter liegt sondern ein anderes Problem besteht.

CSS Property backdrop-filter funktioniert nicht

Ähnliche Themen

Scrollbar Skript funktioniert nicht mehr

CSS funktioniert nicht mehr

Vor und Zurück Schaltfläche CSS funktioniert nicht mehr richtig

Skript "OpenbookModoki" funktioniert nicht mehr

Vertikale Lesezeichenleiste, Script und CSS

CSS Code für hover neu?