From 744b4d03d5b81688e9929331fb9271c727f1ab08 Mon Sep 17 00:00:00 2001
From: nanhaoluo <3075912108@qq.com>
Date: Fri, 16 Jan 2026 00:13:29 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E9=83=A8=E5=88=86?=
 =?UTF-8?q?=E6=89=8B=E6=9C=BA=E6=B5=8F=E8=A7=88=E5=99=A8=E6=AF=9B=E7=8E=BB?=
 =?UTF-8?q?=E7=92=83=E6=95=88=E6=9E=9C=E4=B8=8D=E7=94=9F=E6=95=88=E7=9A=84?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 添加 @supports 检测 backdrop-filter 支持情况
- 为不支持 backdrop-filter 的浏览器提供降级方案（使用更高不透明度背景）
- 修复顶栏、搜索框、侧边栏、弹窗遮罩等组件的兼容性
- 添加 iOS Safari 硬件加速优化（translateZ(0)）
- 同时处理 -webkit-backdrop-filter 不支持的情况
---
 style.css | 95 ++++++++++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 94 insertions(+), 1 deletion(-)

diff --git a/style.css b/style.css
index 269bae6..d44f241 100644
--- a/style.css
+++ b/style.css
@@ -16201,4 +16201,97 @@ html.darkmode.style-glass article.post.post-full.card {
     html.darkmode #leftbar_mobile_catalog::-webkit-scrollbar-thumb {
         background: rgba(var(--themecolor-rgbstr), 0.35);
     }
-}
\ No newline at end of file
+}
+
+
+/* ========== backdrop-filter 移动端兼容性修复 ========== */
+/* 针对不支持 backdrop-filter 的浏览器提供降级方案 */
+
+/* 检测不支持 backdrop-filter 的浏览器，使用更高不透明度的背景作为降级 */
+@supports not (backdrop-filter: blur(1px)) {
+    /* 顶栏降级 */
+    html.no-banner.toolbar-blur #navbar-main {
+        background-color: rgba(var(--themecolor-rgbstr), 0.92) !important;
+    }
+    
+    /* 搜索框降级 */
+    #navbar_search_input_container.open .input-group {
+        background: rgba(255, 255, 255, 0.95);
+    }
+    
+    /* 侧边栏遮罩降级 */
+    #sidebar_mask {
+        background: rgba(0, 0, 0, 0.65);
+    }
+    
+    /* 左侧栏移动端降级 */
+    @media screen and (max-width: 900px) {
+        #leftbar {
+            background: rgba(255, 255, 255, 0.98) !important;
+        }
+        
+        html.darkmode #leftbar {
+            background: rgba(30, 30, 30, 0.98) !important;
+        }
+        
+        .leftbar-mobile-action {
+            background: rgba(var(--themecolor-rgbstr), 0.12);
+        }
+        
+        .leftbar-mobile-actions-container {
+            background: rgba(255, 255, 255, 0.98);
+        }
+        
+        html.darkmode .leftbar-mobile-actions-container {
+            background: rgba(30, 30, 30, 0.98);
+        }
+    }
+    
+    /* 玻璃态顶栏降级 */
+    html.toolbar-glass #navbar-main {
+        background: rgba(255, 255, 255, 0.88) !important;
+    }
+    
+    html.toolbar-glass.darkmode #navbar-main {
+        background: rgba(0, 0, 0, 0.85) !important;
+    }
+    
+    /* 弹窗遮罩降级 */
+    .modal-backdrop,
+    #share_panel_mask {
+        background: rgba(0, 0, 0, 0.7);
+    }
+    
+    /* 图片查看器遮罩降级 */
+    .fancybox-bg {
+        background: rgba(0, 0, 0, 0.92);
+    }
+}
+
+/* 针对 -webkit-backdrop-filter 也不支持的情况（部分旧版安卓浏览器） */
+@supports not (-webkit-backdrop-filter: blur(1px)) {
+    @supports not (backdrop-filter: blur(1px)) {
+        /* 确保在完全不支持的情况下有可用的样式 */
+        html.no-banner.toolbar-blur #navbar-main,
+        html.toolbar-glass #navbar-main {
+            background-color: rgba(var(--themecolor-rgbstr), 0.95) !important;
+        }
+        
+        @media screen and (max-width: 900px) {
+            #leftbar {
+                background: var(--color-foreground) !important;
+            }
+        }
+    }
+}
+
+/* ========== iOS Safari 特殊处理 ========== */
+/* iOS Safari 需要 -webkit- 前缀，且在某些情况下需要强制开启硬件加速 */
+@media screen and (max-width: 900px) {
+    #leftbar,
+    #navbar-main,
+    .leftbar-mobile-actions-container {
+        -webkit-transform: translateZ(0);
+        transform: translateZ(0);
+    }
+}