From b18676774448f44a2ef3a9490224703254cffa7c Mon Sep 17 00:00:00 2001 From: MMP0 <28616020+MMP0@users.noreply.github.com> Date: Fri, 23 Feb 2024 04:33:03 +0900 Subject: [PATCH] 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 Co-authored-by: gradio-pr-bot Co-authored-by: Dawood Khan --- .changeset/young-emus-find.md | 7 +++++++ js/app/src/Blocks.svelte | 1 + js/gallery/shared/Gallery.svelte | 16 ++++++++++++---- 3 files changed, 20 insertions(+), 4 deletions(-) create mode 100644 .changeset/young-emus-find.md diff --git a/.changeset/young-emus-find.md b/.changeset/young-emus-find.md new file mode 100644 index 0000000000..e41dbde07e --- /dev/null +++ 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 index 85ec629354..af9b227c43 100644 --- 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 index 00bf32a15b..7e0c452e24 100644 --- 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); }