Fix modal backdrop blur by applying filter on the overlay itself.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Alireza Hassani
2026-08-08 18:21:43 +03:30
co-authored by Cursor
parent e6670ed06f
commit 656fc57494
14 changed files with 33 additions and 164 deletions
@@ -1,8 +1,9 @@
.overlay {
position: fixed;
inset: 0;
isolation: isolate;
background: transparent;
background: var(--modal-overlay-bg);
backdrop-filter: blur(var(--modal-overlay-blur));
-webkit-backdrop-filter: blur(var(--modal-overlay-blur));
display: flex;
align-items: center;
justify-content: center;
@@ -10,19 +11,6 @@
padding: 20px;
}
/* Tint + blur on ::before so opacity animations on .overlay cannot disable backdrop-filter. */
.overlay::before {
content: '';
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
background: var(--modal-overlay-bg);
backdrop-filter: blur(var(--modal-overlay-blur));
-webkit-backdrop-filter: blur(var(--modal-overlay-blur));
}
.modal {
position: relative;
width: 100%;