CSS Property backdrop-filter funktioniert nicht

  • Firefox-Version
    113.0.1 (64-Bit)
    Betriebssystem
    Windows 10 (64-Bit)

    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

  • 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

    Ü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

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

    Ü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

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

    Wenn du weinen möchtest, bist du falsch hier. Hier gibt es nur Lösungen!

    Oh Herr, wirf Hirn, oder Steine - Hauptsache, du triffst endlich. Das Netz wird dominiert von Goof:ienen:ies und Dullek:innen:s vom Dienst. Schlabokka!

  • das kann nicht sein, weil in anderen browsern funktioniert es

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

    Ü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

  • 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

    Hilfe auch im deutschsprachigen Matrix-Chat möglich oder im IRC-Chat
    Meine Anleitungstexte dürfen gerne "geklaut" und weiter verwendet/kopiert werden ;)

    Einmal editiert, zuletzt von Zitronella (21. Mai 2023 um 15:27) aus folgendem Grund: Ein Beitrag von Zitronella mit diesem Beitrag zusammengefügt.

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

    Ü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

  • Edit 2002Andreas
    Text in Klammercode </> gesetzt.

    2 Mal editiert, zuletzt von DavVader (21. Mai 2023 um 16:21) aus folgendem Grund: Ein Beitrag von DavVader mit diesem Beitrag zusammengefügt.

  • 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.

    Ü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

  • 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


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

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

    Einmal editiert, zuletzt von DavVader (21. Mai 2023 um 15:49) aus folgendem Grund: Ein Beitrag von DavVader mit diesem Beitrag zusammengefügt.

  • 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.

    Ü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

  • 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.


    speziell für safari

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

    Bilder

    Wenn du weinen möchtest, bist du falsch hier. Hier gibt es nur Lösungen!

    Oh Herr, wirf Hirn, oder Steine - Hauptsache, du triffst endlich. Das Netz wird dominiert von Goof:ienen:ies und Dullek:innen:s vom Dienst. Schlabokka!

    Einmal editiert, zuletzt von .DeJaVu (21. Mai 2023 um 16:00) aus folgendem Grund: Ein Beitrag von .DeJaVu mit diesem Beitrag zusammengefügt.

  • 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.

    Es grüßt,

    Ralf

  • 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.

    2 Mal editiert, zuletzt von DavVader (21. Mai 2023 um 16:28) aus folgendem Grund: Ein Beitrag von DavVader mit diesem Beitrag zusammengefügt.