Fix Gallery preview overlay and backdrop (#7505)

* Restore `Gallery` translucent background * Add `backdrop-filter` for Safari * Fix overflowing `Gallery` preview overlay * add changeset * Older browser support * add changeset --------- Co-authored-by: Abubakar Abid <[email protected]> Co-authored-by: gradio-pr-bot <[email protected]> Co-authored-by: Dawood Khan <[email protected]>
gradio-app · Feb 22, 2024 · b186767 · b186767
1 parent 9c36572
commit b186767
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 4 deletions.
diff --git a/.changeset/young-emus-find.md b/.changeset/young-emus-find.md
@@ -0,0 +1,7 @@
+---
+"@gradio/app": patch
+"@gradio/gallery": patch
+"gradio": patch
+---
+
+fix:Fix `Gallery` preview overlay and backdrop
diff --git a/js/app/src/Blocks.svelte b/js/app/src/Blocks.svelte
@@ -867,6 +867,7 @@
 
 	.backdrop {
 		flex: 1 1 0%;
+		-webkit-backdrop-filter: blur(4px);
 		backdrop-filter: blur(4px);
 	}
 

diff --git a/js/gallery/shared/Gallery.svelte b/js/gallery/shared/Gallery.svelte
@@ -338,14 +338,22 @@
 	.preview {
 		display: flex;
 		position: absolute;
-		top: 0px;
-		right: 0px;
-		bottom: 0px;
-		left: 0px;
 		flex-direction: column;
 		z-index: var(--layer-2);
+		border-radius: calc(var(--block-radius) - var(--block-border-width));
+		-webkit-backdrop-filter: blur(8px);
 		backdrop-filter: blur(8px);
+		width: var(--size-full);
+		height: var(--size-full);
+	}
+
+	.preview::before {
+		content: "";
+		position: absolute;
+		z-index: var(--layer-below);
 		background: var(--background-fill-primary);
+		opacity: 0.9;
+		width: var(--size-full);
 		height: var(--size-full);
 	}