Beiträge von DavVader

DavVader

Zitat von BrokenHeart

Es liegt wohl an deinem linearen Gradienten als Hintergrund. Der Blur-Effekt ist bei Chrome wesentlich stärker (mal mit 1000px testen!). Woran das liegt weiß ich nicht.
Wenn man ein Bild als Hintergrund nimmt, sind beide Effekte aber vergleichbar:
Firefox:
Chrome:

Alles anzeigen

Die Blur-Stärke ändert (wohl wegen des Gradienten als Hintergrund wie du gesagt hast) nichts. Mein Anliegen bei dem Ganzen ist, dass die Content-Box in Chrome und anderen Browsern durch den backdrop-filter "weißlicher" wird, was in Firefox nicht der Fall ist.

Ich werde das Problem jetzt über die Transparenz des Hintergrundes lösen, auch wenn ich es nicht verstehe warum der Filter in Firefox nicht funktioniert.

Vielen Dank für all eure Antworten und Hilfe

Lg.

DavVader

Ich habe es jetzt nocheinmal getestet mit preview in VSCode. wenn ich den backdrop-filter: blur(5.5px);

auskommentiere sieht es im Preview und in Chrome genau so aus wie jetzt in Firefox. Es muss also meiner Meinung nach daran liegen, dass Firefox den backdrop-filter aus irgendeinem Grund nicht darstellen kann.

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.

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

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.

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

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

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

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

Beiträge von DavVader

CSS Property backdrop-filter funktioniert nicht

CSS Property backdrop-filter funktioniert nicht

CSS Property backdrop-filter funktioniert nicht

CSS Property backdrop-filter funktioniert nicht

CSS Property backdrop-filter funktioniert nicht

CSS Property backdrop-filter funktioniert nicht

CSS Property backdrop-filter funktioniert nicht

CSS Property backdrop-filter funktioniert nicht

CSS Property backdrop-filter funktioniert nicht