fix(backdrop/modal): backdrop-blur works in desktop browsers

Tanner Reits · Tanner Reits · commit 0f4d7337e703 · 2024-09-16T12:31:50.000-04:00
diff --git a/core/src/components/backdrop/backdrop.ionic.scss b/core/src/components/backdrop/backdrop.ionic.scss
@@ -2,6 +2,6 @@
 @import "./backdrop";
 
 :host {
-  background-color: globals.$ionic-color-base-black;
+  background-color: rgba(globals.$ionic-color-base-black-rgb, 0.7);
   backdrop-filter: blur(2px);
 }
diff --git a/core/src/components/modal/modal.ionic.scss b/core/src/components/modal/modal.ionic.scss
@@ -5,7 +5,7 @@
 // --------------------------------------------------
 
 :host {
-  --backdrop-opacity: 0.7;
+  --backdrop-opacity: 1;
 }
 
 // Shape

Original file line number	Diff line number	Diff line change
`@@ -2,6 +2,6 @@`
`2`	`2`	`@import "./backdrop";`
`3`	`3`
`4`	`4`	`:host {`
`5`		`- background-color: globals.$ionic-color-base-black;`
	`5`	`+ background-color: rgba(globals.$ionic-color-base-black-rgb, 0.7);`
`6`	`6`	`backdrop-filter: blur(2px);`
`7`	`7`	`}`