From 830e48c198f7183fdd01de1870d250fce01b9b16 Mon Sep 17 00:00:00 2001
From: daudix <ddaudix@gmail.com>
Date: Mon, 30 Sep 2024 06:21:52 +0300
Subject: [PATCH] Fix backdrop blur of dropdowns (fixes #91)

---
 CHANGELOG.md   |  4 ++++
 sass/_nav.scss | 21 ++++++++++++++-------
 2 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4277ef9..f4d9558 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -11,6 +11,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Recolor list bullets in GitHub-style alerts.
 
+### Fixed
+
+- Fix backdrop blur of dropdowns and search container in Chrome (#77 and #91).
+
 ## [5.3.0](https://codeberg.org/daudix/duckquill/compare/v5.2.0...v5.3.0)
 
 ### Added
diff --git a/sass/_nav.scss b/sass/_nav.scss
index b32ae9e..1b11c45 100644
--- a/sass/_nav.scss
+++ b/sass/_nav.scss
@@ -1,19 +1,27 @@
 #site-nav {
-	-webkit-backdrop-filter: var(--blur);
 	position: sticky;
 	z-index: 999;
-	backdrop-filter: var(--blur);
 	margin: 1rem auto;
 	inset-block-start: 1rem;
-	box-shadow: var(--edge-highlight), var(--shadow-glass);
 	border-radius: 1.625rem;
-	background-color: var(--nav-bg);
 	max-width: 90%;
 
 	@media only screen and (max-width: 480px) {
 		position: static;
 	}
 
+	&::before {
+		-webkit-backdrop-filter: var(--blur);
+		position: absolute;
+		z-index: -1;
+		backdrop-filter: var(--blur);
+		inset: 0;
+		box-shadow: var(--edge-highlight), var(--shadow-glass);
+		border-radius: 1.625rem;
+		background-color: var(--nav-bg);
+		content: '';
+	}
+
 	nav {
 		padding: 0.5rem;
 
@@ -203,7 +211,7 @@
 				z-index: 1;
 				backdrop-filter: var(--blur);
 				inset-block-start: 3.25rem;
-				box-shadow: var(--edge-highlight),var(--shadow-glass);
+				box-shadow: var(--edge-highlight), var(--shadow-glass);
 				border-radius: calc(var(--rounded-corner) + 0.25rem);
 				background-color: var(--nav-bg);
 				padding: 0.25rem;
@@ -314,8 +322,7 @@
 		box-shadow: var(--edge-highlight);
 		border: none;
 		border-radius: 999px;
-		background-image: none;
-		background-color: var(--fg-muted-1);
+		background: var(--fg-muted-1);
 		padding: 0.5rem 0.75rem;
 		width: 100%;
 		color: inherit;