Fix backdrop blurs on GNOME Web and other browsers requiring -webkit-*

source/src/components/Dialog.astro

@@ -35,6 +35,7 @@ const {
     height: 100%;
     z-index: 6;
     backdrop-filter: blur(10px) brightness(0.5) contrast(0.9);
+    -webkit-backdrop-filter: blur(10px) brightness(0.5) contrast(0.9);
 }
 .dialog {
     display: none;

source/src/components/DiscoverChannel.astro

@@ -31,6 +31,7 @@ const channel = await fetch(DEFAULT_MEDIA_DATA_PROXY + "/api/v1/channels/" + Cha
         align-items: center;
         text-align: center;
         backdrop-filter: blur(24px) contrast(0.7) brightness(0.4);
+        -webkit-backdrop-filter: blur(24px) contrast(0.7) brightness(0.4);
         img {
             width: 24%;
             align-self: center;

source/src/components/Search.astro

@@ -136,6 +136,7 @@ for the JavaScript code in this page.
     width: 100%;
     border-radius: 6px;
     backdrop-filter: blur(20px);
+    -webkit-backdrop-filter: blur(20px);
     border: 1px #282828 solid;
     a:hover {
         background: #0d0d0d !important;

source/src/components/category/CategoryCard.astro

@@ -48,6 +48,7 @@ const {
         place-content: center;
         border-radius: 10px;
         backdrop-filter: blur(3px) brightness(0.3) contrast(0.8);
+        -webkit-backdrop-filter: blur(3px) brightness(0.3) contrast(0.8);
         p {
             font-size: 18px;
             font-weight: bold;

source/src/pages/live.astro

@@ -70,6 +70,7 @@ const Creator = await fetch(
       height: 100%;
       z-index: -1;
       backdrop-filter: brightness(0.2) contrast(0.8) blur(12px);
+      -webkit-backdrop-filter: brightness(0.2) contrast(0.8) blur(12px);
       border-radius: 12px 12px 0px 0px;
     }
     .creator-tw-banner {

source/src/styles/mobile.scss

@@ -9,6 +9,7 @@
     width: calc(100% - 48px);
     background: transparent;
     backdrop-filter: blur(48px) contrast(0.8) brightness(0.8);
+    -webkit-backdrop-filter: blur(48px) contrast(0.8) brightness(0.8);
     justify-content: space-around;
     z-index: 10;
     padding: 0px 24px;
@@ -50,6 +51,7 @@
     .header, .page-title {
         background: rgb(0 0 0 / 80%);
         backdrop-filter: blur(10px) contrast(0.8);
+        -webkit-backdrop-filter: blur(10px) contrast(0.8);
     }
 }
 @media only screen and (max-width: 800px) {

source/src/styles/player.scss

@@ -190,6 +190,7 @@
     gap: 6px;
     padding: 4px;
     backdrop-filter: blur(24px) contrast(0.8) brightness(0.8);
+    -webkit-backdrop-filter: blur(24px) contrast(0.8) brightness(0.8);
     hr {
         margin: 0px;
         width: 100%;