From 47732b9c0ab0fb322de91e7ec5c7a2c4599fd813 Mon Sep 17 00:00:00 2001 From: XPoet Date: Thu, 9 Nov 2023 22:31:18 +0800 Subject: [PATCH] perf: `backdrop-filter: blur()` support Safari browser --- source/css/layout/article-content.styl | 1 + source/css/layout/page.styl | 2 ++ 2 files changed, 3 insertions(+) diff --git a/source/css/layout/article-content.styl b/source/css/layout/article-content.styl index a487bb4be..f024002b0 100644 --- a/source/css/layout/article-content.styl +++ b/source/css/layout/article-content.styl @@ -105,6 +105,7 @@ $spacer-padding = 2rem line-height 1.6 background var(--background-color-1-transparent) border-top-right-radius var(--box-border-radius) + -webkit-backdrop-filter blur(2px) backdrop-filter blur(2px) } diff --git a/source/css/layout/page.styl b/source/css/layout/page.styl index fccebc241..68bc19c32 100644 --- a/source/css/layout/page.styl +++ b/source/css/layout/page.styl @@ -15,11 +15,13 @@ $post-tools-offset = calc((100vw - var(--page-content-max-width) / 2) - 5rem) &.is-home { .transparent-1 { background var(--header-transparent-background-1) + -webkit-backdrop-filter blur(var(--header-backdrop-filter-blur)) backdrop-filter blur(var(--header-backdrop-filter-blur)) } .transparent-2 { background var(--header-transparent-background-2) + -webkit-backdrop-filter blur(calc(var(--header-backdrop-filter-blur) * 1.25)) backdrop-filter blur(calc(var(--header-backdrop-filter-blur) * 1.25)) } }