Apply backdrop filter for Safari

kagikn · kagikn · commit 1aa666cc7735 · 2023-06-28T09:55:16.000+09:00
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -210,6 +210,7 @@ const { title } = Astro.props;
     background-position: center center;
     background-repeat: no-repeat;
     background-size: cover;
+    -webkit-backdrop-filter: var(--footer-bg-filter);
     backdrop-filter: var(--footer-bg-filter);
   }
 
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -255,11 +255,13 @@ import FeatureSection from '../components/FeatureSection.astro';
       background-repeat: no-repeat;
       background-size: cover;
       min-height: 70vh;
+      -webkit-backdrop-filter: var(--hero-bg-filter);
       backdrop-filter: var(--hero-bg-filter);
     }
 
     @media (prefers-color-scheme: light) {
       .shvdn-container {
+        -webkit-backdrop-filter: var(--hero-bg-filter);
         backdrop-filter: blur(2.5px);
       }
     }

Original file line number	Diff line number	Diff line change
`@@ -210,6 +210,7 @@ const { title } = Astro.props;`
`210`	`210`	`background-position: center center;`
`211`	`211`	`background-repeat: no-repeat;`
`212`	`212`	`background-size: cover;`
	`213`	`+ -webkit-backdrop-filter: var(--footer-bg-filter);`
`213`	`214`	`backdrop-filter: var(--footer-bg-filter);`
`214`	`215`	`}`
`215`	`216`
Original file line number	Diff line number	Diff line change
`@@ -255,11 +255,13 @@ import FeatureSection from '../components/FeatureSection.astro';`
`255`	`255`	`background-repeat: no-repeat;`
`256`	`256`	`background-size: cover;`
`257`	`257`	`min-height: 70vh;`
	`258`	`+ -webkit-backdrop-filter: var(--hero-bg-filter);`
`258`	`259`	`backdrop-filter: var(--hero-bg-filter);`
`259`	`260`	`}`
`260`	`261`
`261`	`262`	`@media (prefers-color-scheme: light) {`
`262`	`263`	`.shvdn-container {`
	`264`	`+ -webkit-backdrop-filter: var(--hero-bg-filter);`
`263`	`265`	`backdrop-filter: blur(2.5px);`
`264`	`266`	`}`
`265`	`267`	`}`