/* ============================================================ IOS-PERF.CSS iOS Safari/PWA 专用性能优化化 ============================================================ 核心策略 1. 对高度频道场景（聊天、底部部导航栏）禁用 backdrop-filter: blur() backdrop-filter iOS WebKit 上的头像号 GPU 杀手，每帧实时高度斯模式糊 2. 对线下模式式场景降级别视觉效果果），减少 GPU 合成 3. 降级别复杂动画面画面?transition 4. 优化化滚动画面动画面容器器containment 依赖：device-adapter.js 上添is-ios class ============================================================ */ /* ============================================================ 1. 聊天页面（最高度频道场景）：禁用 backdrop-filter ============================================================ */ html.is-ios #layer-chat > .nav-bar, html.is-ios #layer-chat > .nav-bar#chat-nav-bar, html.is-ios #chat-nav-bar, html.is-ios #chat-input-bar, html.is-ios #layer-chat .input-bar, html.is-ios #layer-chat .toolbar, html.is-ios #layer-chat .toolbar .emoji-tab, html.is-ios #layer-chat .pop-menu, html.is-ios #layer-chat .pop-opt { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* 聊天导航栏栏：用完全不透明明纯色替代毛玻璃（消息除半透明明模式糊条） */ html.is-ios #layer-chat > .nav-bar, html.is-ios #chat-nav-bar { background: var(--chat-nav-bg, #ffffff) !important; opacity: 1 !important; } /* 聊天输入框框?*/ html.is-ios #chat-input-bar, html.is-ios #layer-chat .input-bar { background: var(--chat-input-bg, #ffffff) !important; opacity: 1 !important; } /* ============================================================ 2. 底部部导航栏（始终可见））：禁backdrop-filter ============================================================ */ html.is-ios .bottom-nav { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: #f5f5f5 !important; /* [FIX-iOS胶囊栏残2026-05-28] 删除 opacity:1!important 这条规则无条件覆盖盖了 body.layer-open .bottom-nav { opacity:0 } 的隐藏逻辑 因为ios-perf.css在styles-part1.css之后加载，同!important同特异性后者胜出）? 导致iOS上胶囊栏永远可见），无法被layer-open/wechat-active隐藏*/ /* [FIX-底部部导航栏栏v5] 去掉硬编码的margin-bottom:9px 改为styles-part1.css 中用 env(safe-area-inset-bottom) 动画面态适配配置顶 避免没有 Home Indicator 的机制作型（iPhone SE/iPad）出）现多余白色间距?*/ } /* [FIX-iOS胶囊栏残2026-05-28] iOS上layer打开关闭时强制作隐藏胶囊栏 使用更高度特异性确保覆盖盖保护CSS */ html.is-ios body.layer-open .bottom-nav, html.is-ios body.wechat-active .bottom-nav, html.is-ios.keyboard-active .bottom-nav { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } /* ============================================================ 3. 弹窗口窗口遮罩层：用纯色替blur（大面积 blur 极GPU ============================================================ */ html.is-ios .modal-mask, html.is-ios .gacha-overlay, html.is-ios .sv-complete-overlay, html.is-ios .ff-cmenu-bg, html.is-ios .ff-create-menu-overlay .ff-cmenu-bg { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: rgba(0, 0, 0, 0.7) !important; } /* ============================================================ 4. 韩系主题：高度特异backdrop-filter 覆盖盖 ============================================================ */ html.is-ios body.theme-korean #layer-chat > .nav-bar#chat-nav-bar, html.is-ios body.theme-korean #chat-input-bar, html.is-ios body.theme-korean #layer-chat .input-bar, html.is-ios body.theme-korean #layer-chat .toolbar, html.is-ios body.theme-korean #layer-chat .toolbar .emoji-tab, html.is-ios body.theme-korean #layer-chat .pop-menu, html.is-ios body.theme-korean #layer-chat .pop-opt, html.is-ios body.theme-korean #layer-chat .bubble .bubble-reply-quote, html.is-ios body.theme-korean #layer-chat .msg-row:not(.me) .bubble, html.is-ios body.theme-korean #layer-chat .msg-row.me .bubble, html.is-ios body.theme-korean #chat-scroll-bottom-btn, html.is-ios body.theme-korean #layer-chat .typing-indicator, html.is-ios body.theme-korean #layer-chat .chat-notice, html.is-ios body.theme-korean #layer-chat-settings > .nav-bar, html.is-ios body.theme-korean #layer-chat-settings .group-box, html.is-ios body.theme-korean #tab-contacts > .nav-bar, html.is-ios body.theme-korean #contact-list .list-item, html.is-ios body.theme-korean #layer-wechat > .wx-tab-bar, html.is-ios body.theme-korean #layer-wechat > .nav-bar { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* ============================================================ 5. 聊天气泡优化化（减GPU 合成层） ============================================================ */ /* 聊天气泡：简化阴影?当用户有自定义气泡CSS时让*/ html.is-ios body #layer-chat .bubble { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06) !important; } /* 头像像：禁用复filter 当用户有自定义气泡CSS时让*/ html.is-ios body #layer-chat .avatar, html.is-ios body #layer-chat .avatar-wrapper-chat .avatar { filter: none !important; } /* 消息息行：布局隔离 + 触发摸优化化 */ html.is-ios .msg-row { contain: layout style; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } /* 聊天气泡：消息?00ms点击延迟，提示升触发摸响应?*/ html.is-ios .bubble { touch-action: manipulation; -webkit-tap-highlight-color: transparent; } /* 聊天历史容器器：优化化滚动画面?*/ html.is-ios #chat-history { contain: layout style; -webkit-overflow-scrolling: touch; } /* ============================================================ 6. 线下模式式专项优化化（用户反馈线下容器易发热） ============================================================ */ /* 线下模式式独立页面：禁用所backdrop-filter */ html.is-ios #layer-offline-mode .nav-bar, html.is-ios #layer-offline-mode .offline-fixed-header, html.is-ios #layer-offline-mode .offline-info-bar, html.is-ios #layer-offline-mode .offline-input-bar { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* 线下模式式消息息卡顿片：简化阴影?*/ html.is-ios .offline-msg-box { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important; contain: layout style; } /* 线下模式式文本块气泡：简*/ html.is-ios .bubble.offline-text-block { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06) !important; } /* 线下模式式聊天嵌入框：禁用线下头像部栏blur */ html.is-ios #chat-offline-header, html.is-ios #chat-offline-private-bar, html.is-ios #chat-offline-group-bar { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* 线下模式式滚动画面动画面容器器优化化 */ html.is-ios #offline-chat-history { contain: layout style; -webkit-overflow-scrolling: touch; } /* ============================================================ 7. 全局：减transition 时长（iOS 动画面画面合成开关闭销大） ============================================================ */ html.is-ios .bubble, html.is-ios .nav-bar, html.is-ios .bottom-nav, html.is-ios .input-bar, html.is-ios #chat-input-bar, html.is-ios .list-item, html.is-ios .modal-box, html.is-ios .pop-menu, html.is-ios .pop-opt, html.is-ios .toolbar, html.is-ios .btn, html.is-ios button, html.is-ios .tab-btn, html.is-ios .avatar, html.is-ios .msg-row { transition-duration: 0.15s !important; } /* [OPT-返回流畅-v3] layer 动画面画面优化化 1. 缩短0.18s（比 0.24s 25% 的帧数） 2. 所layer 预览设 will-change:transform，让 GPU 提示前创建合成 3. 配置顶合下方42 节的 position:fixed，动画面画面期间距零重排 */ html.is-ios .layer { transition: transform 0.18s cubic-bezier(0.32, 0.72, 0, 1), visibility 0s 0.18s, opacity 0s 0.18s !important; will-change: transform !important; } html.is-ios .layer.show { transition: transform 0.18s cubic-bezier(0.32, 0.72, 0, 1), visibility 0s 0s, opacity 0s 0s !important; } /* [OPT-返回按钮钮] 增大nav-icon触发摸区域域，消息?00ms延迟 */ html.is-ios .nav-icon { min-width: 44px !important; min-height: 44px !important; touch-action: manipulation !important; -webkit-tap-highlight-color: transparent !important; } /* ============================================================ 8. 降级别复杂动画面画面 ============================================================ */ /* 精灵系统浮动画面动画面画面：降级别为静*/ html.is-ios .slh-bubbles span { animation: none !important; } html.is-ios .sln-title-icon { animation: none !important; } /* 打字体指示器：简*/ html.is-ios .typing-dots span { animation-duration: 1.5s !important; } /* ============================================================ 9. 离屏元素素完全不渲染? ============================================================ */ /* [FIX-iOS白屏-2026-04-11] content-visibility:hidden会导致白屏， 改为 contain: layout style paint 保留性能优化化但不隐藏内容器 */ /* [FIX-白屏v3] 不再通过JS设置顶contentVisibility:hidden，彻底部避免白*/ html.is-ios .layer:not(.show) { contain: layout style paint; contain-intrinsic-size: 100vw 100vh; } /* 确保 .layer.show 始终可见），覆盖盖任何残留的 content-visibility 内联样式式 */ html.is-ios .layer.show { content-visibility: visible !important; contain: none; } /* ============================================================ 10. 滚动画面动画面容器器优化化 ============================================================ */ html.is-ios .scroll-y, html.is-ios #moments-feed, html.is-ios #contact-list, html.is-ios .couple-modules-scroll, html.is-ios .ff-body2, html.is-ios .gacha-body { contain: layout style; } /* ============================================================ 11. 快速滚动画面动画面模式式：降级别阴影影响应 ============================================================ */ html.is-ios body .fast-scrolling .bubble { box-shadow: none !important; } html.is-ios body .fast-scrolling .avatar { box-shadow: none !important; } /* ============================================================ 12. 低帧率自适配应模式式（由 perf-utils.js FPS 监控动画面态添加） ============================================================ */ /* [FIX-2026-05-12-v2] 不再* 通配置顶，改为对 body 本身设置顶，子元素素继承 */ html.is-ios body.low-fps-mode { transition: none !important; animation: none !important; } html.is-ios body.low-fps-mode .bubble, html.is-ios body.low-fps-mode .msg-row, html.is-ios body.low-fps-mode .nav-bar, html.is-ios body.low-fps-mode .input-bar, html.is-ios body.low-fps-mode .toolbar, html.is-ios body.low-fps-mode .list-item, html.is-ios body.low-fps-mode .avatar, html.is-ios body.low-fps-mode .spirit-card, html.is-ios body.low-fps-mode .modal-box { transition: none !important; animation: none !important; } html.is-ios body.low-fps-mode .bubble { box-shadow: none !important; } html.is-ios body.low-fps-mode .nav-bar { box-shadow: none !important; } html.is-ios body.low-fps-mode .bottom-nav { box-shadow: none !important; } /* ============================================================ 13. 减少 box-shadow 复杂 ============================================================ */ html.is-ios .spirit-card, html.is-ios .spirit-card-avatar, html.is-ios .sln-back, html.is-ios .sln-add { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important; } /* ============================================================ 14. 视频道通话/语音通话优化化 ============================================================ */ html.is-ios #layer-voice-call, html.is-ios #layer-video-call { background: rgba(0, 0, 0, 0.95) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } html.is-ios .vc-btn, html.is-ios .vidcall-btn { box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2) !important; } /* ============================================================ 15. 线下模式式自定义CSS兼容容器 当用户设置顶了自定义线下CSS时，允许backdrop-filter 生效果 ============================================================ */ html.is-ios body.has-custom-offline-css .offline-fixed-header, html.is-ios body.has-custom-offline-css .offline-info-bar, html.is-ios body.has-custom-offline-css .offline-msg-box, html.is-ios body.has-custom-offline-css .offline-input-bar, html.is-ios body.has-custom-offline-css #chat-history.offline-chat-active, html.is-ios body.has-custom-offline-css .bubble.offline-text-block, html.is-ios body.has-custom-offline-css #layer-offline-mode, html.is-ios body.has-custom-offline-css #layer-offline-mode * { -webkit-backdrop-filter: unset !important; backdrop-filter: unset !important; } /* ============================================================ 16. [FIX-iOS卡顿顿-2026-04-12] iOS 返回键盘卡顿?& 一般性卡顿顿优化? ============================================================ */ /* 16a+16b 已合并到7 节（0.18s + will-change:transform*/ /* 16c. 返回按钮钮 / 关闭闭按钮钮消息除 iOS 300ms 点击延迟 touch-action:manipulation 告诉浏览栏器不需要等待双击缩放判*/ html.is-ios .nav-icon, html.is-ios .sln-back, html.is-ios .sdt-back, html.is-ios .offline-nav-icon, html.is-ios [onclick*="closeLayer"], html.is-ios [onclick*="goBack"], html.is-ios [onclick*="GoBack"], html.is-ios [onclick*="exitApp"] { touch-action: manipulation; -webkit-tap-highlight-color: transparent; } /* ============================================================ 17. [FIX-iOS弹窗口窗口] 关闭系网弹窗口窗口禁用动画面画面，避免innerHTML后GPU合成层问题? ============================================================ */ html.is-ios .rn-form-overlay, html.is-ios .rn-card-overlay, html.is-ios .rn-link-overlay { animation: none !important; } html.is-ios .rn-form-panel, html.is-ios .rn-card-panel, html.is-ios .rn-link-panel { animation: none !important; } /* ============================================================ 18. [FIX-iOS点击] list-item / modal按钮钮消息除300ms点击延迟 ============================================================ */ html.is-ios .list-item { touch-action: manipulation !important; -webkit-tap-highlight-color: transparent; cursor: pointer; } html.is-ios .modal-mask .modal-box button { touch-action: manipulation !important; -webkit-tap-highlight-color: transparent; } html.is-ios .modal-mask { touch-action: manipulation !important; } /* ============================================================ 19. [FIX-iOS发烫-2026-04-19] 心声弹窗口窗口性能补强（用户肉眼无变化 ------------------------------------------------------------ 19a. 心声/历史/编辑弹窗口窗口?iOS 下强制作关闭?backdrop-filter korean 主题这几个弹窗口窗口仍保留 blur+saturate，是 iOS GPU 热点 关闭闭后背景景仍然是半透明明玻璃色（来自 --kr-glass-ultra）， 但不再实时高度斯模式糊，用户视觉几乎察觉不到差异，GPU 温度数明显下降 ============================================================ */ html.is-ios #modal-thought .modal-box, html.is-ios #modal-heart-history .modal-box, html.is-ios #modal-heart-edit .modal-box, html.is-ios body.theme-korean #modal-thought .modal-box, html.is-ios body.theme-korean #modal-heart-history .modal-box, html.is-ios body.theme-korean #modal-heart-edit .modal-box { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* 19b. 心声正文滚动画面动画面区域独containment（不影响应响应视觉，只影响应响应重绘范围*/ html.is-ios #modal-thought .heart-popup-body, html.is-ios #modal-heart-history .hh-body, html.is-ios #modal-heart-edit .modal-box { contain: content; } /* 19c. 打开关闭?modal-box 不需要常GPU 层（无动画面画面期will-change auto*/ html.is-ios .modal-mask .modal-box { will-change: auto !important; } /* 19d. 隐藏中的弹窗口窗口释放 GPU 合成层（仅命display:none mask 打开关闭时使display:flex/block 不命中本规则*/ html.is-ios .modal-mask[style*="display: none"], html.is-ios .modal-mask[style*="display:none"] { content-visibility: hidden; contain: strict; } /* ============================================================ 20. 统一弹窗口窗口/卡顿片 backdrop-filter 禁用（扩大白名字体单 ============================================================ [FIX-2026-05-12-v3] 删除所[class*=] 属性选择择器器，改为具体 class 遗漏的元素素由 JS _iosBlurCleanup() 添加 .ios-no-blur 兜底部? ============================================================ */ html.is-ios .modal-mask, html.is-ios .modal-mask .modal-box, html.is-ios .pp-modal, html.is-ios .pp-settings-modal, html.is-ios .pp-overlay, html.is-ios .pp-custom-blog, html.is-ios .action-sheet, html.is-ios .confirm-modal, html.is-ios .alert-modal, html.is-ios .ff-create-menu-overlay, html.is-ios .gacha-overlay, html.is-ios .heart-popup, html.is-ios .offline-page-bg, html.is-ios .chat-search-panel, html.is-ios .sv-complete-overlay { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* 21. 中断按钮钮：线下生成期间距可见），触发发 abortOfflineGeneration() */ html.is-ios #offline-abort-btn { will-change: auto !important; } /* 22. 虚拟列表项容器器优化化（长聊天列表项?*/ html.is-ios #chat-history, html.is-ios #offline-chat-history { content-visibility: auto; contain: layout style; } /* 23. 消息息contain 优化化：隔离每条消息息的 reflow 影响应响应范围 iOS 在长列表项上的触发摸命中和滚动画面动画面表现更流畅 */ html.is-ios #chat-history .msg-row, html.is-ios #offline-chat-history .offline-msg-box { contain: layout style; } /* ============================================================ 24. [FIX-美化卡顿顿-2026-05-04] 韩系主题：全面覆盖盖非聊天页面 backdrop-filter ============================================================ 用户反馈使用美化（尤其韩系主题）后严重卡顿顿。根因： korean-theme.css 共有 80+ backdrop-filter: blur() 声明 之前ios-perf.css 只覆盖盖了聊天页面20 个元素素 其余 60+ blur 仍在各页面持续消息?GPU（每帧实时高度斯模式糊） 本次补全所有遗漏的页面元素素 ============================================================ */ /* 24a. 设置顶/美化页面 */ html.is-ios body.theme-korean #layer-settings > .nav-bar, html.is-ios body.theme-korean #layer-settings .group-box, html.is-ios body.theme-korean #layer-settings .settings-subpage, html.is-ios body.theme-korean #layer-settings .settings-nav-bar, html.is-ios body.theme-korean #layer-beauty > .nav-bar, html.is-ios body.theme-korean #layer-beauty .group-box, html.is-ios body.theme-korean #layer-beauty .beauty-subpage, html.is-ios body.theme-korean #layer-beauty .beauty-menu-item { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* 24b. 精灵系统 */ html.is-ios body.theme-korean .spirit-card, html.is-ios body.theme-korean .spirit-list-nav, html.is-ios body.theme-korean .spirit-detail-topbar, html.is-ios body.theme-korean .spirit-detail-nav, html.is-ios body.theme-korean .spirit-detail-section, html.is-ios body.theme-korean .spirit-action-btn, html.is-ios body.theme-korean .sln-card, html.is-ios body.theme-korean .sdt-section { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* 24c. 朋友状态?*/ html.is-ios body.theme-korean #tab-moments > .nav-bar, html.is-ios body.theme-korean .status-nav-bar, html.is-ios body.theme-korean .status-mood-bar, html.is-ios body.theme-korean .status-bubble, html.is-ios body.theme-korean .status-vital-card, html.is-ios body.theme-korean .status-detail-panel, html.is-ios body.theme-korean .moments-post-card { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* 24d. 情侣空间距间距/日历/账本 */ html.is-ios body.theme-korean .couple-module-card, html.is-ios body.theme-korean .couple-detail-nav, html.is-ios body.theme-korean .couple-detail-section, html.is-ios body.theme-korean .ca-top-bar, html.is-ios body.theme-korean .cl-top-bar, html.is-ios body.theme-korean .cl-card { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* 24e. 桌面/底部部导航栏 */ html.is-ios body.theme-korean .bottom-nav, html.is-ios body.theme-korean #desktop, html.is-ios body.theme-korean .dock-bar { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* 24f. 商店/外卖/骑手 */ html.is-ios body.theme-korean #layer-shop > .nav-bar, html.is-ios body.theme-korean .shop-tab-bar, html.is-ios body.theme-korean .shop-product-card, html.is-ios body.theme-korean .food-nav, html.is-ios body.theme-korean .food-category-bar, html.is-ios body.theme-korean .rider-nav { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* 24g. 同人/书店/论坛 */ html.is-ios body.theme-korean .ff-header2, html.is-ios body.theme-korean .ff-bottom-bar2, html.is-ios body.theme-korean .ff-read-header, html.is-ios body.theme-korean .ff-write-header, html.is-ios body.theme-korean .ff-book-detail-header, html.is-ios body.theme-korean .forum-nav, html.is-ios body.theme-korean .forum-dm-input-bar { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* 24h. 学习/日程/世界面?*/ html.is-ios body.theme-korean #layer-study > .nav-bar, html.is-ios body.theme-korean #layer-schedule > .nav-bar, html.is-ios body.theme-korean #layer-worldbook > .nav-bar, html.is-ios body.theme-korean .study-lecture-card, html.is-ios body.theme-korean .wb-card { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* 24i. 线下模式式 */ html.is-ios body.theme-korean:not(.has-custom-offline-css) .offline-fixed-header, html.is-ios body.theme-korean:not(.has-custom-offline-css) .offline-info-bar, html.is-ios body.theme-korean:not(.has-custom-offline-css) .offline-input-bar, html.is-ios body.theme-korean:not(.has-custom-offline-css) .offline-msg-box { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* 24j. 关闭系相册/直播/游戏*/ html.is-ios body.theme-korean .rn-form-panel, html.is-ios body.theme-korean .rn-card-panel, html.is-ios body.theme-korean .rn-link-panel, html.is-ios body.theme-korean #layer-photo-album > .nav-bar, html.is-ios body.theme-korean #layer-live > .nav-bar, html.is-ios body.theme-korean #layer-games > .nav-bar, html.is-ios body.theme-korean .dating-card, html.is-ios body.theme-korean .dating-nav, html.is-ios body.theme-korean .dating-settings-overlay { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* 24k. 钱包/红包/票务 */ html.is-ios body.theme-korean #layer-wallet > .nav-bar, html.is-ios body.theme-korean .redpacket-overlay, html.is-ios body.theme-korean .ticket-card, html.is-ios body.theme-korean .ticket-nav { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* 24l. 韩系主题：终极通杀 对所有layer内的nav-bar和group-box禁用blur */ html.is-ios body.theme-korean .layer > .nav-bar, html.is-ios body.theme-korean .layer .group-box, html.is-ios body.theme-korean .layer .nav-bar { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* ============================================================ 25. [FIX-美化卡顿顿-2026-05-04] 可爱主题 box-shadow 简 ============================================================ cute-theme.css 98 box-shadow 声明，多为多层阴影影响应? iOS 上，大量 box-shadow 在滚动画面动画面期间距触发?compositing 导致帧率下降。简化为单层轻量阴影影响应? ============================================================ */ /* 25a. 可爱主题聊天气泡 */ html.is-ios body.theme-cute #layer-chat .bubble { box-shadow: 0 1px 3px rgba(200,190,210,0.15) !important; transition: none !important; } html.is-ios body.theme-cute #layer-chat .bubble:active { transform: none !important; } /* 25b. 可爱主题导航栏?输入框框?禁用 blur */ html.is-ios body.theme-cute #layer-chat > .nav-bar#chat-nav-bar, html.is-ios body.theme-cute #chat-input-bar, html.is-ios body.theme-cute #layer-chat .input-bar, html.is-ios body.theme-cute #layer-chat .toolbar { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: var(--chat-nav-bg, #ffffff) !important; opacity: 1 !important; } /* 25c. 可爱主题所nav-bar 简化阴影?*/ html.is-ios body.theme-cute .nav-bar { box-shadow: 0 1px 3px rgba(200,190,210,0.12) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* 25d. 可爱主题卡顿片/弹窗口窗口阴影影响应简*/ html.is-ios body.theme-cute .group-box, html.is-ios body.theme-cute .spirit-card, html.is-ios body.theme-cute .modal-box, html.is-ios body.theme-cute .couple-module-card, html.is-ios body.theme-cute .dating-card, html.is-ios body.theme-cute .list-item, html.is-ios body.theme-cute .status-bubble, html.is-ios body.theme-cute .status-vital-card { box-shadow: 0 1px 4px rgba(200,190,210,0.12) !important; } /* ============================================================ 26. [FIX-美化卡顿顿-2026-05-04] 自定义CSS性能兜底部 ============================================================ 用户导入框的美化包可能含大backdrop-filter / box-shadow / animation iOS 上通过 .has-custom-*-css 类自动画面降级别? ============================================================ */ /* 26a. 自定义全局CSS时，降级别非聊天页面的blur */ html.is-ios body.has-custom-global-css .nav-bar, html.is-ios body.has-custom-global-css .bottom-nav, html.is-ios body.has-custom-global-css .modal-box, html.is-ios body.has-custom-global-css .group-box { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* [REFACTOR-2026-06-01] 无条件禁用iOS聊天气泡transition以优化化性能 */ html.is-ios #layer-chat .bubble { transition: none !important; } /* ============================================================ 27. [PERF-Overhaul] 生成模式式性能优化化 AI生成消息息期间距，禁用非必要的动画面画面和transition 减少DOM重排时的GPU/CPU开关闭销 ============================================================ */ /* [FIX-2026-05-12-v2] 生成模式式下：对聊天容器器设contain，子元素素通过继承禁用动画面画面 */ body.generating-mode #chat-history { transition: none !important; } body.generating-mode #chat-history .bubble, body.generating-mode #chat-history .msg-row, body.generating-mode #chat-history .avatar, body.generating-mode #chat-history .bubble-reply-quote { transition: none !important; animation-duration: 0.01ms !important; } /* 生成模式式下：聊天容器器启用contain优化化 */ body.generating-mode #chat-history { contain: layout style; will-change: scroll-position; } /* 生成模式式下：消息息气泡禁用box-shadow动画面画面 */ body.generating-mode .bubble { transition: none !important; } /* 虚拟滚动画面动画面spacer不参与布局计算 */ .vs-spacer-top, .vs-spacer-bottom { contain: strict; } /* [FIX-2026-05-12-v2] 低性能模式式：不再用 * 通配置顶，针对具体元素素降*/ body.low-perf-mode .bubble, body.low-perf-mode .msg-row, body.low-perf-mode .nav-bar, body.low-perf-mode .input-bar, body.low-perf-mode .toolbar, body.low-perf-mode .list-item, body.low-perf-mode .avatar, body.low-perf-mode .spirit-card, body.low-perf-mode .modal-box, body.low-perf-mode .bottom-nav { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } body.low-perf-mode .bubble, body.low-perf-mode .msg-row { box-shadow: none !important; } body.low-perf-mode img:not(.avatar-img) { image-rendering: optimizeSpeed; } /* ============================================================ 28. [FIX-iOS发热-2026-05-12] 壁纸模式式 backdrop-filter 全面禁用 ============================================================ styles.css 中壁纸模式?.gwp-*)的导航栏栏/底部部栏使blur(10px~20px) 之前的通配置顶选择择器器未覆盖盖到这些元素素。壁纸模式式下 blur 叠加背景景图片片 导致 iOS GPU 每帧都要对大面积图片片做高度斯模式糊采样式，是发热主因之一 ============================================================ */ /* 28a. 壁纸模式式导航栏?*/ html.is-ios .gwp-nav-bar, html.is-ios .gwp-bottom-bar, html.is-ios .gwp-header { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* 28b. 壁纸模式式下的通用）导航栏?底部部blur 覆盖盖 styles.css 5964-15976行定义了blur 的导航栏栏样式式 */ html.is-ios body.has-wallpaper .nav-bar, html.is-ios body.wallpaper-active .nav-bar, html.is-ios body.has-wallpaper .bottom-nav, html.is-ios body.wallpaper-active .bottom-nav, html.is-ios body.has-wallpaper .bottom-nav { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: #f8f8f8 !important; opacity: 1 !important; } /* ============================================================ 29. [FIX-iOS发热-2026-05-12] 听歌/音乐面板 backdrop-filter 禁用 ============================================================ styles.css 375/4536/4555行：听歌面板使用 blur(12px~20px) 这些面板在后台播放时仍然保持 DOM 存在，持续消息?GPU ============================================================ */ html.is-ios .listen-panel, html.is-ios .listen-mini-player, html.is-ios .listen-playlist-panel, html.is-ios .listen-header, html.is-ios .listen-nav { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* 听歌面板用深色半透明明替代 blur */ html.is-ios .listen-panel { background: rgba(18, 18, 18, 0.96) !important; } html.is-ios .listen-mini-player { background: rgba(20, 20, 20, 0.92) !important; } html.is-ios .listen-playlist-panel { background: rgba(30, 30, 30, 0.98) !important; } /* ============================================================ 30. [FIX-iOS发热-2026-05-12] 状态?心情页面 backdrop-filter 禁用 ============================================================ styles.css 991-6365行：状态态气泡、状态态详情面板大blur(8px~18px) ============================================================ */ html.is-ios .status-bubble, html.is-ios .status-vital-card, html.is-ios .status-detail-panel, html.is-ios .status-nav-bar, html.is-ios .status-mood-bar { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* ============================================================ 31. [FIX-iOS发热-2026-05-12] 企鹅视频道相关闭 backdrop-filter 禁用 ============================================================ styles.css 1088-11377行：视频道播放器控件使blur(10px~12px) ============================================================ */ html.is-ios .p2-player-controls, html.is-ios .p2-nav-bar, html.is-ios .p2-comment-bar, html.is-ios .p2-header, html.is-ios .p2-bottom-bar { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* ============================================================ 32. [FIX-iOS发热-2026-05-12] UNO游戏/桌游 backdrop-filter 禁用 ============================================================ styles.css 764-10234行：UNO游戏界面面大量 blur(6px~10px) ============================================================ */ html.is-ios .uno-seat-bar, html.is-ios .uno-hand-area, html.is-ios .uno-overlay, html.is-ios .uno-result-overlay, html.is-ios .uno-card-area, html.is-ios .uno-header { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* ============================================================ 33. [FIX-iOS发热-2026-05-12] 扭蛋/抽卡顿通知 backdrop-filter 禁用 ============================================================ */ html.is-ios .gacha-notify-inner, html.is-ios .gacha-filter-bar, html.is-ios .gacha-overlay, html.is-ios .gacha-result-panel, html.is-ios .gacha-header { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* ============================================================ 34. [FIX-iOS发热-2026-05-12] 成就系统弹窗口窗口 backdrop-filter 禁用 ============================================================ */ html.is-ios .ach-overlay, html.is-ios .ach-card, html.is-ios .ach-popup, html.is-ios .ach-header { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* ============================================================ 35. [FIX-iOS发热-2026-05-12] 同人系统底部部创建菜单单 blur 禁用 ============================================================ */ html.is-ios .ff-bottom-bar2, html.is-ios .ff-cmenu-bg, html.is-ios .ff-mine-abtn, html.is-ios .ff-header2, html.is-ios .ff-read-header, html.is-ios .ff-write-header, html.is-ios .ff-book-detail-header, html.is-ios .sv-header-action-btn, html.is-ios .sv-complete-overlay { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* ============================================================ 36. [FIX-iOS发热-2026-05-12-v3] iOS 上全局禁用 backdrop-filter ============================================================ [FIX-2026-05-12-v3] 彻底部删除所[class*="xxx"] 属性选择择器器 属性选择择器器是 iOS WebKit 样式式重计算的性能杀手：每次 DOM 变化 都要对所有元素素做字体符串匹配置顶，复杂O(n*m) 改为只列举具class 名字体。遗漏的元素素通过 JS DOMContentLoaded 时统一添加 .ios-no-blur class 兜底部（见） perf-utils.js） ============================================================ */ html.is-ios .nav-bar, html.is-ios .input-bar, html.is-ios .toolbar, html.is-ios .bottom-nav, html.is-ios .modal-box, html.is-ios .modal-mask, html.is-ios .pop-menu, html.is-ios .pop-opt, html.is-ios .wx-tab-bar, html.is-ios .dock-bar, html.is-ios .action-sheet, html.is-ios .heart-popup, html.is-ios .chat-search-panel, html.is-ios .offline-fixed-header, html.is-ios .offline-info-bar, html.is-ios .offline-input-bar, html.is-ios .spirit-card, html.is-ios .spirit-list-nav, html.is-ios .spirit-detail-topbar, html.is-ios .spirit-detail-nav, html.is-ios .couple-module-card, html.is-ios .couple-detail-nav, html.is-ios .dating-card, html.is-ios .dating-nav, html.is-ios .listen-panel, html.is-ios .listen-mini-player, html.is-ios .listen-playlist-panel, html.is-ios .gacha-overlay, html.is-ios .gacha-notify-inner, html.is-ios .gacha-filter-bar, html.is-ios .sv-complete-overlay, html.is-ios .ff-cmenu-bg, html.is-ios .ff-create-menu-overlay, html.is-ios .rn-form-overlay, html.is-ios .rn-card-overlay, html.is-ios .rn-link-overlay, html.is-ios .dating-settings-overlay, html.is-ios .confirm-modal, html.is-ios .alert-modal, html.is-ios .pp-modal, html.is-ios .pp-settings-modal, html.is-ios .pp-overlay, html.is-ios .pp-custom-blog, html.is-ios .gwp-nav-bar, html.is-ios .status-bubble, html.is-ios .status-vital-card, html.is-ios .status-detail-panel, html.is-ios .status-nav-bar, html.is-ios .status-mood-bar, html.is-ios .p2-player-controls, html.is-ios .p2-nav-bar, html.is-ios .p2-comment-bar, html.is-ios .uno-seat-bar, html.is-ios .uno-hand-area, html.is-ios .uno-overlay, html.is-ios .uno-result-overlay, html.is-ios .ach-overlay, html.is-ios .ach-card, html.is-ios .ff-header2, html.is-ios .ff-bottom-bar2, html.is-ios .ff-read-header, html.is-ios .ff-write-header, html.is-ios .ff-book-detail-header, html.is-ios .forum-nav, html.is-ios .forum-dm-input-bar, html.is-ios .redpacket-overlay, html.is-ios .layer > .nav-bar, html.is-ios .layer .group-box, html.is-ios .layer .nav-bar, html.is-ios .ios-no-blur { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* ============================================================ 37. [FIX-iOS发热-2026-05-12] 禁用不可layer 内的 infinite 动画面画面 ============================================================ CSS @keyframes 动画面画面即使元素素不可见），只要 animation 属性存在且 元素素DOM 中，iOS WebKit 仍会计算动画面画面帧（不同Chrome 的优化化） 对所有未显示layer 内的元素素强制作禁用动画面画面? ============================================================ */ /* [FIX-2026-05-12-v2] 不再* 通配置顶子元素素（触发发全量样式式重计算） 对父 layer 设置顶 visibility:hidden 后，WebKit 自动画面暂停子元素素动画面画面? contain:strict 隔离重绘范围，pointer-events:none 防止误触发?*/ html.is-ios .layer:not(.show) { animation: none !important; transition: none !important; visibility: hidden; pointer-events: none; contain: strict; } /* [FIX-iOS群头像像弹窗口窗口误触发-2026-06] layer-group-setup在未show时强制作display:none iOS WebKit在contain:strict + pointer-events:none组合下仍可能响应应touch事件 对这个特定layer使用display:none彻底部移出）渲染染树，根治穿透明问题题 */ html.is-ios #layer-group-setup:not(.show), html.is-ios #layer-add-group:not(.show) { display: none !important; } /* 桌面上的持续动画面画面也需要在非活跃时禁用 */ /* [FIX-2026-05-12-v3] 删除 [class*=] 通配置顶，改为具class */ html.is-ios .layer.show .float-anim, html.is-ios .layer.show .pulse-anim, html.is-ios .layer.show .breathe-anim, html.is-ios .layer.show .glow-anim, html.is-ios .layer.show .slh-bubbles span, html.is-ios .layer.show .sln-title-icon { animation-duration: 4s !important; animation-timing-function: linear !important; } /* ============================================================ 38. [FIX-iOS发热-2026-05-12] 减少 box-shadow 复杂 ============================================================ [FIX-2026-05-12-v2] 删除.scroll-y * 通配置顶规则 该规则给所有子元素素（包span/p/br 等行内元素素）box-shadow 导致 iOS 上出）现大长条视觉 bug，且是性能杀手 改为只针对具体的卡顿片/列表项项元素素简化阴影影响应? ============================================================ */ html.is-ios .scroll-y .spirit-card, html.is-ios .scroll-y .game-card, html.is-ios .scroll-y .shop-card, html.is-ios .scroll-y .forum-post-card, html.is-ios .scroll-y .ff-scard2, html.is-ios .scroll-y .sv-task-card, html.is-ios .scroll-y .couple-module-card, html.is-ios .scroll-y .list-item, html.is-ios .scroll-y .msg-row .bubble, html.is-ios .scroll-y .moments-post-card, html.is-ios .scroll-y .dating-card, html.is-ios .scroll-y .status-bubble { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important; } /* ============================================================ 39. [FIX-iOS发热-2026-05-12] 快速滚动画面动画面时禁用所有视觉特 ============================================================ [PERF-卡顿修复-2026-07-10] JS 重构后 .ios-fast-scroll 加在滚动容器上 而非 body，同时保留旧选择器做向后兼容。 ============================================================ */ /* [FIX-2026-05-12-v2] 不再* 通配置顶（性能反模式式） 快速滚动画面动画面时只对滚动画面动画面容器器本身和直接子卡顿片降级别即可*/ /* 旧版（body 级 class，向后兼容） */ html.is-ios body.ios-fast-scroll .scroll-y, html.is-ios body.ios-fast-scroll #chat-history, html.is-ios body.ios-fast-scroll #offline-chat-history, html.is-ios body.ios-fast-scroll #moments-feed, html.is-ios body.ios-fast-scroll #contact-list { transition: none !important; } html.is-ios body.ios-fast-scroll .bubble, html.is-ios body.ios-fast-scroll .msg-row, html.is-ios body.ios-fast-scroll .list-item, html.is-ios body.ios-fast-scroll .spirit-card, html.is-ios body.ios-fast-scroll .moments-post-card, html.is-ios body.ios-fast-scroll .avatar { box-shadow: none !important; text-shadow: none !important; filter: none !important; transition: none !important; } /* 新版（容器级 class，JS 只在滚动容器上加 .ios-fast-scroll，不触发全文档样式重算） */ html.is-ios .ios-fast-scroll .bubble, html.is-ios .ios-fast-scroll .msg-row, html.is-ios .ios-fast-scroll .list-item, html.is-ios .ios-fast-scroll .spirit-card, html.is-ios .ios-fast-scroll .moments-post-card, html.is-ios .ios-fast-scroll .avatar { box-shadow: none !important; text-shadow: none !important; filter: none !important; transition: none !important; } /* ============================================================ 40. [FIX-iOS发热-2026-05-12] contain 优化化：隔离重绘范 ============================================================ */ /* 所有滚动画面动画面容器器启content-visibility: auto 减少离屏渲染染 */ html.is-ios .scroll-y, html.is-ios #chat-history, html.is-ios #offline-chat-history, html.is-ios #contact-list, html.is-ios .ff-body, html.is-ios .ff-body2 { content-visibility: auto; contain-intrinsic-size: auto 500px; } /* [FIX-朋友圈白屏-移动端-2026-06-06] #moments-feed 不用 content-visibility:auto。 根因：朋友圈在 requestAnimationFrame 中渲染，tab切换时 feed 可能尚未稳定可见， content-visibility:auto 会把内容折叠成 contain-intrinsic-size 占位 → 整片白屏。 朋友圈通常只有几十条，无需此优化。改用 contain:content 即可隔离重排。 */ html.is-ios #moments-feed { content-visibility: visible !important; contain: content; } /* 卡顿片类元素素启contain: layout style paint 隔离重绘 */ html.is-ios .spirit-card, html.is-ios .game-card, html.is-ios .shop-card, html.is-ios .forum-post-card, html.is-ios .ff-scard2, html.is-ios .sv-task-card, html.is-ios .couple-module-card { contain: layout style paint; } /* ============================================================ 41. [FIX-iOS聊天卡顿顿-2026-05-12] 聊天 layer 进入框/退出）动画面画面优化? ============================================================ 问题题：iOS layer 滑入框/滑出）动画面画面期间距，如chat-history 内有大量 DOM WebKit 需要为整个子树创建合成层快照，导致动画面画面首帧严重掉帧 解决 1. 聊天 layer 使用更短的动画面画面时长（0.2s vs 0.28s 2. 动画面画面期间距 chat-history 使用 contain:strict 隔离，不参与合成 3. 退出）动画面画面使translateX(100%) 而非默认值，确保 GPU 只移动画面一个合成层 ============================================================ */ /* 聊天layer专用：已合并到通用） .layer 规则.18s），不再需要单独声*/ /* 聊天layer滑入框时，内容器区域域不参与动画面画面合成（减少合成层大小） */ html.is-ios #layer-chat.show #chat-history { will-change: auto; } /* 聊天layer退出）时（不含show），内容器完全隔离 */ html.is-ios #layer-chat:not(.show) #chat-history { contain: strict; content-visibility: hidden; } /* ============================================================ 42. [FIX-iOS层级别错乱-2026-05-12] 键盘盘收起后确保正确的层级别堆叠 ============================================================ 问题题：键盘盘收起时 restoreLayerHeights 清除所inline z-index 导致多个 .layer.show z-index 都回CSS 默认5000 此时 DOM 顺序决定堆叠，但如果）线下模式式 layer DOM 中靠后， 它会覆盖盖线上聊天界面面 解决：使CSS 确保 layer-chat 在有 offline-chat-active z-index 低于没有class layer.show ============================================================ */ /* 线下模式式激活时，确保线下相关闭UI在正确层*/ html.is-ios #layer-chat.show { z-index: 5000; } /* 任何layer-chat 之后打开关闭?layer 都应该在其上*/ html.is-ios #layer-chat.show ~ .layer.show { z-index: 5010 !important; } /* ============================================================ [FIX-iOS键盘盘-2026-05-18-v8] iOS 键盘盘弹窗口起/收起流畅优化化 ============================================================ 核心原始则 1. iOS layer 始终 position:fixed，绝不跳absolute↔fixed 2. 键盘盘弹窗口出）时用 padding-bottom 挤压 flex 空间距间距（GPU无reflow 3. 收键盘盘时padding-bottom 过渡（而非 height，因auto 无法动画面画面? 4. 不用 visibility:hidden 隐藏底部层 layer（会闪烁白），改用背景景色全覆盖盖 ============================================================ */ /* iOS layer 默认 fixed 定位（非键盘盘状态态下全屏*/ html.is-ios .layer { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; height: auto !important; width: 100% !important; } /* [FIX-iOS定位统一-v8] 覆盖盖 styles-part3.css #layer-chat.show position:absolute ID选择择器器优化先级别高度于 .layer class 选择择器器，必须ID 级别别覆盖盖 [FIX-iOS线下飞天-2026-05-30] :not(.keyboard-active) 限定 原始规则的 top:0!important 在键盘盘弹窗口起时也生效果，与本规则同特异1,2,1)且后加载 styles-part3.css 方案A top:var(--vv-offset-top)（补Safari 推页面偏移）压掉 但输入框框栏transform:-keyboard-height 仍照常生两者错线下输入框框栏飞天 限定为非键盘盘态后，键盘盘弹窗口起时让位给方案A，offset 补偿transform 上推重新对齐*/ html.is-ios:not(.keyboard-active) #layer-chat.show, html.is-ios:not(.keyboard-active) #layer-offline-mode.show { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; height: auto !important; width: 100% !important; } /* [FIX-键盘盘贴合-v4] iOS 键盘盘 layer 定位已由 styles-part3.css 统一处理 html.keyboard-active .layer.show { top: var(--vv-offset-top); height: var(--vv-height); } 这里仅保iOS Safari 特有html/body 锁定（防Safari 推页面时整体偏移 以及其他 layer（非聊天/线下）的 iOS 键盘盘适配配置顶?*/ /* [FIX-iOS白屏根治-2026-05-30-方案B] iOS 键盘盘弹窗口出）?layer 定位方案 核心原始则：背景?layer 死死钉在全屏 top:0，绝不跟Safari 推页面移 白屏根因：原始方案top: var(--vv-offset-top)，iOS Safari 键盘盘弹窗口起 推页（offsetTop 变正值），layer.top 跟随它整体下移， 顶部部就露出）底部层白"上半白屏，下半壁键盘盘" 方案B：layer 强制作 top:0 + bottom:0 + height:100%，钉死全屏不动画面? 配置顶合 html/body position:fixed 锁定（下方规则），背景景纹丝不动画面? 键盘盘适配配置顶改由layer 自己transform 上推输入框框栏方案处理（styles-part3.css） [FIX-非聊天键盘盘v14] 非聊天模式?keyboard-nonchat)不对layer做调整?*/ html.is-ios.keyboard-active:not(.keyboard-nonchat) .layer.show { position: fixed !important; /* top:0 钉死，不--vv-offset-top（这是白屏根因） */ top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; height: 100% !important; min-height: 0 !important; overflow: hidden !important; /* 背景景容器器不加 padding-bottom，保持全屏静止；键盘盘空间距间距由内部滚动画面动画面区域/输入框框栏自己处*/ padding-bottom: 0 !important; box-sizing: border-box !important; } /* [FIX-iOS输入框框框飞2026-05-30-方案C] iOS 专用兜底部：聊天滚动画面动画面区域 margin-bottom + 输入框框?transform 上推 背景景钉死后，键盘盘空间距间距全靠这两条处理。ios-perf.css 后加载，高度特异性确保生效果? margin-bottom 而非 padding-bottom：缩小可视高度度数、内容器不上移、不弹窗口顶部?*/ html.is-ios.keyboard-active #layer-chat.show #chat-history { margin-bottom: var(--keyboard-height, 0px) !important; padding-bottom: 0 !important; box-sizing: border-box !important; } html.is-ios.keyboard-active #layer-chat.show #chat-input-bar, html.is-ios.keyboard-active #layer-chat.show .input-bar { transform: translateY(calc(-1 * var(--keyboard-height, 0px))) !important; will-change: transform; } html.is-ios.keyboard-closing #layer-chat.show #chat-history { transition: margin-bottom 0.15s ease-out !important; } html.is-ios.keyboard-closing #layer-chat.show #chat-input-bar, html.is-ios.keyboard-closing #layer-chat.show .input-bar { transition: transform 0.15s ease-out !important; } /* [FIX-非聊天键盘盘v14] 非聊天模式式下，iOS键盘盘弹窗口出）时： 不对layer做任何position/height调整整，让各模式块自己的键盘盘适配配置顶逻辑正常工作 时空间距系统用paddingBottom+marginBottom，论坛用style.bottom，各自处理输入框框框贴合键盘盘 html/body的position:fixed锁定（下方规则）已足够防止Safari推页面*/ /* [FIX-iOS飞天-v9] 键盘盘弹窗口出）时固html/body，阻Safari 推页面 必须设置顶 top:0;left:0 防止 Safari 已经 scroll 导致的偏移被锁定*/ html.is-ios.keyboard-active { overflow: hidden !important; position: fixed !important; width: 100% !important; height: 100% !important; top: 0 !important; left: 0 !important; } html.is-ios.keyboard-active body { overflow: hidden !important; position: fixed !important; width: 100% !important; height: 100% !important; top: 0 !important; left: 0 !important; } /* [FIX-键盘盘贴合-v4] 键盘盘弹窗口出）时聊天历flex 自适配应（iOS 高度特异性兜底部） */ html.is-ios.keyboard-active #chat-history, html.is-ios.keyboard-active #offline-chat-history, html.is-ios.keyboard-active .offline-scroll-container { flex: 1 1 0% !important; min-height: 0 !important; overflow-y: auto !important; } /* [FIX-SMS键盘盘] 短信消息息区域域键盘盘弹窗口出）时flex自适配应 */ html.is-ios.keyboard-active .sms-messages { flex: 1 1 0% !important; min-height: 0 !important; overflow-y: auto !important; } /* [FIX-SMS键盘盘] 短信容器器使用100%高度度数继承layer尺寸，避00dvh与layer高度度数不一*/ html.is-ios.keyboard-active .sms-chat-container { height: 100% !important; max-height: 100% !important; } /* [FIX-键盘盘贴合-v5] 收键盘盘过渡：padding-bottom top 做过渡（不再height 做过渡） */ html.is-ios.keyboard-closing .layer.show { transition: padding-bottom 0.15s ease-out, top 0.15s ease-out !important; } /* ============================================================ 43. [FIX-半透明明2026-05-12] 全局消息除半透明明背景景 ============================================================ 问题题：禁backdrop-filter 后，原始本依赖 blur 遮盖rgba 背景景 变成了可见）的半透明明条。解决：所有固定位置顶的 UI 元素素使用完全不透明明背景景 ============================================================ */ /* 43a. 所nav-bar 使用不透明明白色背景景 */ html.is-ios .nav-bar { background: var(--nav-bar-bg, #ffffff) !important; opacity: 1 !important; } /* 43b. 所input-bar / toolbar 使用不透明明背景景（悬浮胶囊兼容容器） */ html.is-ios .input-bar, html.is-ios .toolbar, html.is-ios .toolbar .emoji-tab { background: var(--input-bar-bg, rgba(255,255,255,0.98)) !important; opacity: 1 !important; } /* 43c. 弹窗口出）菜单单使用不透明明深色背景景 */ html.is-ios .pop-menu, html.is-ios .pop-opt { background: #4c4c4c !important; opacity: 1 !important; } /* 43d. 弹窗口窗口遮罩层使用不透明明暗色 */ html.is-ios .modal-mask { background: rgba(0, 0, 0, 0.75) !important; } html.is-ios .modal-mask .modal-box { background: #ffffff !important; opacity: 1 !important; } /* 43e. 微信 tab栏 - 悬浮胶囊使用半透明明毛玻璃 */ html.is-ios .wx-tab-bar { background: rgba(255, 255, 255, 0.45) !important; opacity: 1 !important; } /* [FIX-iOS微信tab栏消息?2026-05-28] PWA模式式下tab栏消息失效的终极修复复 问题题：iOS PWA模式式下微信底部部tab联系人?动画面?消息失效，浏览栏器模式式正常 根因：PWA冷启动画面时状态态残留导致tab栏被隐藏，具体触发发条件不确定 修复复策略：在PWA模式式下，只要键盘盘未激活就无条件强制作tab栏可见）? 安全性：.layer.show的z-index(5000)远高度?layer-wechat(1) 聊天界面面会完全覆盖盖tab栏，所以即使tab栏display:flex也不会视觉穿透明?*/ /* [FIX-wx-tab穿透-2026-06-06] 增加 body:not(.layer-open) 约束， 防止聊天layer打开时tab栏仍 display:flex 导致按钮穿透到聊天工具栏(生成/心声) */ html.is-ios.is-pwa:not(.keyboard-active) body:not(.layer-open) #layer-wechat > .wx-tab-bar { display: flex !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; position: absolute !important; /* [FIX-悬浮胶囊-iOS-2026-06-05] 改为悬浮胶囊风格，不再贴底部全宽度 */ /* [FIX-iOS底栏抬高-2026-06-13] 底栏位置太低，增大bottom值往上抬 */ bottom: calc(52px + env(safe-area-inset-bottom, 0px)) !important; left: 0 !important; right: 0 !important; margin-left: auto !important; margin-right: auto !important; width: 85% !important; max-width: 340px !important; height: 56px !important; padding-bottom: 0 !important; border-radius: 28px !important; background: rgba(255, 255, 255, 0.45) !important; backdrop-filter: blur(15px) !important; -webkit-backdrop-filter: blur(15px) !important; box-shadow: 0 5px 20px rgba(0,0,0,0.12) !important; border: none !important; box-sizing: border-box !important; z-index: 1001 !important; } /* [FIX-悬浮胶囊] 内容器区域延伸到底部部，悬浮tab栏浮于其上 */ html.is-ios.is-pwa:not(.keyboard-active) body:not(.layer-open) #layer-wechat > #wx-content-area { bottom: 0 !important; } /* 浏览栏器模式式兜底部（非PWA）：body没有layer-open时强制作显*/ html.is-ios.is-browser:not(.keyboard-active) body:not(.layer-open):not(#_) #layer-wechat > .wx-tab-bar { display: flex !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; } /* 43f. 线下模式式固定*/ html.is-ios .offline-fixed-header, html.is-ios .offline-info-bar, html.is-ios .offline-input-bar { background: var(--offline-bar-bg, #ffffff) !important; opacity: 1 !important; } /* 43g. 聊天搜索面板 */ html.is-ios .chat-search-panel { background: #ffffff !important; opacity: 1 !important; } /* 43h. 状态态栏/心情*/ html.is-ios .status-nav-bar, html.is-ios .status-mood-bar { background: #ffffff !important; opacity: 1 !important; } /* ============================================================ 44. [FIX-iOS点击卡顿顿-2026-05-12] 联系人人卡顿?& 返回按钮钮零延迟触发? ============================================================ 问题题：iOS上点击联系人人卡顿片进入框聊天、点击返回按钮钮退出）聊天有明显卡顿顿感 根因 1. click事件在touchend后有~80-300ms延迟（即使touch-action:manipulation也不能完全消息除） 2. 点击时触发发的样式式重计算与layer动画面画面竞争GPU 修复复 1. touch-action:manipulation 消息除双击等待 2. will-change:transform 预览创建合成层，点击时无需临时创建 3. contain:layout style 隔离重排范围 ============================================================ */ /* 44a. 联系人人列表项项：消息除点击延迟（不再用will-change避免GPU内存爆炸*/ html.is-ios #contact-list .list-item { touch-action: manipulation !important; -webkit-tap-highlight-color: transparent !important; contain: layout style !important; /* [FIX-2026-05-12-v3] 删除 will-change:transform 每个list-item都创建独立GPU合成 导致iOS GPU内存压力过大，反而造成全局卡顿顿。contain:layout style 已足够隔离重*/ /* 消息除active状态态的transition延迟 */ transition: background-color 0.05s !important; } /* 44b. 联系人人列表项项active反馈：立即响应?*/ html.is-ios #contact-list .list-item:active { background-color: #ececec !important; transition: none !important; } /* 44c. 返回按钮钮：扩大触发摸区域域（不再预览创建合成层*/ html.is-ios .layer.show > .nav-bar .nav-icon, html.is-ios .layer.show > .nav-bar .offline-nav-icon { min-width: 48px !important; min-height: 48px !important; display: flex !important; align-items: center !important; justify-content: center !important; touch-action: manipulation !important; -webkit-tap-highlight-color: transparent !important; /* [FIX-2026-05-12-v3] 删除 will-change:opacity 每个nav-icon都创建合成层无意 返回按钮钮只在点击瞬间距需要动画面画面，不需要常驻GPU*/ transition: opacity 0.05s !important; } /* 44d. 返回按钮钮active反馈 */ html.is-ios .layer.show > .nav-bar .nav-icon:active, html.is-ios .layer.show > .nav-bar .offline-nav-icon:active { opacity: 0.5 !important; transition: none !important; } /* 44e. layer-chat 打开关闭时：隐藏的聊天历史不参与合成（减少GPU内存压力*/ html.is-ios #layer-chat:not(.show) #chat-history { content-visibility: hidden !important; contain: strict !important; } /* 44f. layer滑入框动画面画面期间距：禁止联系人人列表项的will-change（释放GPU给动画面画面） */ html.is-ios body.layer-open #contact-list .list-item { will-change: auto !important; } /* ============================================================ 45. [FIX-iOS情侣联系人人不可见）-2026-05-15] 确保情侣空间距间距 layer 内容器正确布局 ============================================================ 问题题：iOS position:fixed .layer 内部 flex 容器器高度度数计算异常 couple-content-area 高度度数可能0，导.couple-list-page 被裁切， 联系人人列表项虽存在DOM 但完全不可见）? 解决：强couple layer 和内容器区域域使用正确的 flex 布局 设置顶 min-height:0 flex 子项正确 shrink ============================================================ */ html.is-ios #layer-couple.show { display: flex !important; flex-direction: column !important; } html.is-ios #couple-content-area { flex: 1 !important; overflow-y: auto !important; min-height: 0 !important; display: flex !important; flex-direction: column !important; } html.is-ios .couple-list-page { flex: 1 !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; min-height: 0 !important; } /* ============================================================ 46. [FIX-iOS情侣联系人空白-2026-06] 确保选择联系人页面卡片可见 ============================================================ 问题：iOS用户点击右上角+进入选择联系人页面，联系人列表全部空白 根因： 1. couple-list-card 在 flex 容器中高度可能被计算为0（iOS WebKit flex bug） 2. 头像 img onerror 后 fallback 可能不触发重绘 3. 联系人卡片缺少 touch-action 导致点击无响应 修复：强制 couple-list-card 最小高度、可见性、touch支持 ============================================================ */ html.is-ios .couple-list-card { min-height: 60px !important; visibility: visible !important; display: flex !important; align-items: center !important; touch-action: manipulation !important; -webkit-tap-highlight-color: transparent !important; contain: layout style !important; } html.is-ios .couple-list-card img { visibility: visible !important; display: block !important; } /* ============================================================ 47. [FIX-iOS网课按钮点不动-2026-06] 学习App网课相关按钮touch修复 ============================================================ 问题：iOS用户选择联系人和资料后点击"开始网课"按钮无响应 根因： 1. 按钮在 scroll-y 容器内，iOS WebKit 将微小移动判定为scroll而非click 2. 缺少 touch-action: manipulation 导致300ms延迟 3. study-teacher-item/study-material-select 同样需要修复 ============================================================ */ html.is-ios #layer-study .study-btn-primary { touch-action: manipulation !important; -webkit-tap-highlight-color: transparent !important; cursor: pointer !important; -webkit-appearance: none !important; } html.is-ios #layer-study .study-teacher-item { touch-action: manipulation !important; -webkit-tap-highlight-color: transparent !important; cursor: pointer !important; } html.is-ios #layer-study .study-material-select { touch-action: manipulation !important; -webkit-tap-highlight-color: transparent !important; cursor: pointer !important; } /* [FIX-iOS键盘盘透明底部-v8] 不再visibility:hidden 隐藏底部层 layer（会导致白色闪烁烁）， 当前 layer 已保持全屏覆盖盖（padding-bottom 挤压方案），底部层 layer 自然被遮住 如果） JS 仍设data-kb-hidden，仅降低 z-index 使其不干扰，不做可见）性切换*/ html.is-ios.keyboard-active .layer.show[data-kb-hidden="1"] { z-index: 1 !important; pointer-events: none !important; } /* ============================================================ [FIX-iOS键盘盘背景景外露-2026-05-20] iOS 键盘盘弹窗口出）时防止背景景外 ============================================================ 问题题：iOS 键盘盘弹窗口出）?--vv-offset-top 非零，layer top 下移 导致 layer 上方露出）底部层内容器（body/其他layer的背景景色），用户看到 背景景"被顶部到b2"的问题题 修复复：键盘盘弹窗口出）时body #device 设置顶纯色背景景遮挡露出）的区域域 同时确保当前 layer.show 的背景景色不透明明，完全覆盖盖*/ html.is-ios.keyboard-active body { background-color: #ededed !important; } html.is-ios.keyboard-active #device { background-color: #ededed !important; } /* 线下模式式layer键盘盘弹窗口出）时确保背景景不透明明 */ html.is-ios.keyboard-active #layer-offline-mode.show { background-color: #ededed !important; } /* [FIX-iOS白屏-2026-05-30] 聊天layer不再设置顶固定背景景 问题题：聊天layer高度度数跟随 --vv-height（可见）区域域高度度数）变化 固定背景景色导致键盘盘弹窗口出）后输入框框框被键盘盘覆盖盖但看不见）? 原始理：聊天layer用flex布局，键盘盘弹窗口出）时 --vv-height 设为可见）高度度数? layer高度度数压缩，flex子项（chat-history）被挤小，input-bar自动画面推到底部部 此时layer背景景就是chat-history的背景景（#f5f3ef），无需额外设置顶? #layer-chat.show styles-part3.css 中已设置顶 background: #ededed 聊天层级别的背景景色处理由CSS自然继承，不需要键盘盘态特殊覆盖盖*/ /* html.is-ios.keyboard-active #layer-chat.show { background-color: #ededed !important; } */ /* 短信layer键盘盘弹窗口出）时确保背景景不透明明 */ html.is-ios.keyboard-active #layer-sms.show { background-color: #ffffff !important; } /* [FIX-iOS白屏根治-2026-05-30-方案B] 禁用顶部部遮罩 原始方案用 ::before layer 上方--vv-offset-top 高度的遮罩条， 是为了补layer 跟随 Safari 推页面下移后顶部部露出）的空间距隙 方案B 已让 layer 钉死 top:0 永不移动画面，顶部部不再有空间距隙 此遮罩条反而会在顶部部画面一条多余色块，故禁用*/ html.is-ios.keyboard-active .layer.show::before { content: none !important; display: none !important; } /* ============================================================ 50. [FIX-iOS闪烁退白屏-2026-05-20] 降低内存压力 & 减少 GPU 合成 ============================================================ iOS WKWebView 内存上限1.5GB，超出）后系统直接杀进程导致白屏闪烁退 以下规则通过多种手段降低内存GPU 压力 1. 隐藏 layer 彻底部释放渲染染资源（display:none visibility:hidden 更彻底部） 2. 聊天消息息使用 content-visibility:auto 实现懒渲染? 3. 限制作图片片解码分辨 4. 减少合成层数 ============================================================ */ /* 50a. [DISABLED-2026-05-28] 临时禁用：此规则导致PWA模式式下微信tab栏消息? 原始因待查，可能影响应响应了#layer-wechat(.page)内部的stacking context TODO: 找到根因后用更精确的选择择器器重新启*/ /* html.is-ios .layer:not(.show):not(.closing) { display: none !important; } */ /* 50b. 聊天消息行：布局隔离 [FIX-气泡贴图裁剪-2026-07-13] 移除 content-visibility:auto。 content-visibility:auto 会始终对元素施加 paint 包含(即使消息在屏内)， 把子内容裁到 .msg-row 盒子边界，导致气泡装饰伪元素(::before/::after top:-10px 探出顶部)的上半部分被裁掉，表现为"气泡贴图上半消失"。 改用 contain:layout style(不裁剪)维持布局隔离。 */ html.is-ios #chat-history .msg-row { contain: layout style; } /* 50c. 线下聊天消息行：同样式布局隔离(移除 content-visibility 避免裁剪贴图) */ html.is-ios .offline-scroll-container .offline-msg-box { contain: layout style; } /* 50d. 限制作图片片解码尺寸，防止大图片占用过多内 iOS Safari 解码一4000x3000 的图片片需~48MB 内存 */ html.is-ios img { image-rendering: auto; } html.is-ios .msg-row img, html.is-ios .bubble img { max-width: 240px !important; max-height: 240px !important; object-fit: cover; } /* 50e. 朋友论坛等列表项项也使content-visibility 懒渲染?*/ html.is-ios .moments-post-card, html.is-ios .forum-post-card, html.is-ios .ff-scard2, html.is-ios .shop-card { content-visibility: auto; contain-intrinsic-size: auto 200px; } /* 50f. 禁用不必要的 will-change（每will-change 创建一个独立合成层 合成层过多会导致 GPU 内存溢出） */ html.is-ios .bubble, html.is-ios .list-item, html.is-ios .msg-row, html.is-ios .spirit-card, html.is-ios .moments-post-card { will-change: auto !important; } /* 50g. 减少复杂渐变和阴影影响应在滚动画面动画面容器器中的开关闭销 */ html.is-ios .scroll-y { -webkit-transform: translateZ(0); transform: translateZ(0); } /* 50h. 表情头像像等小图片限制作尺寸防止超大图片渗入框 */ html.is-ios .bubble .sticker-img { max-width: 180px !important; max-height: 180px !important; } /* ============================================================ 51. [FIX-iOS白屏-2026-05-22] 非标签风?layer 键盘盘弹窗口出）时的布局保护 ============================================================ 问题题：泡paopao)、聊天设置顶、联系人人资料layer 使用自定义布局 键盘盘弹窗口出）?height:var(--vv-height) 压缩layer 高度度数? 但内部没flex:1 滚动画面动画面容器器来适配应，导致内容器区域域高度度数变 0 白屏 修复复：确保这layer 在键盘盘弹窗口出）时内部内容器可滚动画面动画面，不被裁切 ============================================================ */ /* 51a. 泡泡app：确pp-app 容器器适配应键盘盘压缩后的高度度数 */ html.is-ios.keyboard-active #layer-paopao.show .pp-app { height: 100% !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; } html.is-ios.keyboard-active #layer-paopao.show .pp-app > div:not(.pp-nav-bar):not(.pp-bottom-bar2) { flex: 1 !important; min-height: 0 !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; } /* 51b. 聊天设置顶layer */ html.is-ios.keyboard-active #layer-chat-settings.show { overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; } /* 51c. 联系人人资料layer */ html.is-ios.keyboard-active #layer-contact-profile.show { overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; } /* 51d. 泡泡私聊气泡页面 */ html.is-ios.keyboard-active .pp-bubble-page { display: flex !important; flex-direction: column !important; height: 100% !important; } html.is-ios.keyboard-active .pp-bubble-page > .pp-bubble-body, html.is-ios.keyboard-active .pp-bubble-page > div[style*="flex:1"], html.is-ios.keyboard-active .pp-bubble-page > div[style*="overflow"] { flex: 1 !important; min-height: 0 !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; } /* 51e. 键盘盘弹窗口出）时泡泡输入框框栏背景景不透明明，防止透明底部白屏 */ html.is-ios.keyboard-active #layer-paopao.show { background-color: #f5f5f5 !important; } /* ============================================================ 52. [FIX-iOS白屏-2026-05-22] 通用）弹窗口窗口(modal)在键盘盘弹窗口出）时的保 ============================================================ 修复改人设时弹窗口?modal + textarea + 键盘盘，如modal 定位不当会超出）可视区域域 确保 modal-box 在键盘盘弹窗口出）时正确居中且可滚动画面动画面? ============================================================ */ html.is-ios.keyboard-active .modal-mask, html.is-ios.keyboard-active .ff-modal-overlay, html.is-ios.keyboard-active .pp-result-overlay { position: fixed !important; top: 0 !important; left: 0 !important; width: 100% !important; height: var(--vv-height, 100%) !important; } html.is-ios.keyboard-active .modal-box { max-height: calc(var(--vv-height, 100vh) - 40px) !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; } /* ============================================================ 53. [FIX-iOS白屏-2026-05-22] 终极兜底部：任layer.show 永远可见） ============================================================ 覆盖盖任何可能JS inline 残留，确show 状态态的 layer 永远不会被隐*/ html.is-ios .layer.show { display: flex !important; visibility: visible !important; opacity: 1 !important; content-visibility: visible !important; pointer-events: auto !important; } /* ============================================================ [PERF-发热v4] 补全 backdrop-filter 禁用 (iOS) ============================================================ v4.1: 不再使用 * 通配置顶符（会导致主界面面滑动画面/点击卡顿顿）， 改为精确列出）使用 backdrop-filter: blur() 的选择择器器 前面-5节已覆盖盖聊天/底部部导航栏/弹窗口窗口/韩系主题等， 此节补全 styles.css 中剩余遗漏的元素素 ============================================================ */ /* 线下模式式右侧键盘菜单单 */ html.is-ios .offline-context-menu { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* 约会/恋爱模式块 */ html.is-ios .dating-card, html.is-ios .dating-nav, html.is-ios .dating-settings-overlay { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* 设置顶面板 */ html.is-ios .settings-overlay, html.is-ios .settings-panel, html.is-ios .settings-sheet, html.is-ios .unified-panel { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* 视频道通话 */ html.is-ios .vc-overlay, html.is-ios .vc-controls, html.is-ios .vc-timer-bar, html.is-ios .vc-wave-container, html.is-ios #vc-mini-bubble, html.is-ios .vc-status-bar { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* 一音乐播放 */ html.is-ios .listen-player-panel, html.is-ios .listen-lyric-tag, html.is-ios #listen-float-ball, html.is-ios .listen-playlist-panel, html.is-ios .listen-controls { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* 故事/秘密模式块 */ html.is-ios .st-input-bar, html.is-ios .st-header, html.is-ios .secret-input-bar, html.is-ios .secret-card, html.is-ios .secret-overlay, html.is-ios .secret-nav-bar { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* 状态态页*/ html.is-ios .status-nav-btn, html.is-ios .status-back-btn, html.is-ios .status-vital-card, html.is-ios .status-trend-card, html.is-ios .status-bubble, html.is-ios .status-detail-panel, html.is-ios .status-mood-bar, html.is-ios .status-nav-bar { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* 书店/阅读 */ html.is-ios .book-popup-header, html.is-ios .book-popup-nav, html.is-ios .brs-panel { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* UNO 游戏 */ html.is-ios .uno-top-bar, html.is-ios .uno-bottom-bar, html.is-ios .uno-chat-bubble, html.is-ios .uno-overlay, html.is-ios .uno-result-overlay, html.is-ios .uno-input-bar { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* 自习*/ html.is-ios .sv-header-action-btn, html.is-ios .sv-bottom-bar, html.is-ios .sv-complete-overlay { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* 朋友动画面?*/ html.is-ios .moment-post-compose, html.is-ios .moment-compose-bar, html.is-ios .moments-post-card, html.is-ios .moment-card, html.is-ios .moment-detail-panel { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* 扭蛋系统 */ html.is-ios .gacha-notify-inner, html.is-ios .gacha-collection-header { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* 漂流*/ html.is-ios .drift-stats-card, html.is-ios .drift-msg-card, html.is-ios .drift-header { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* 成就系统 */ html.is-ios .ach-section-card, html.is-ios .ach-float-btn, html.is-ios .ach-overlay, html.is-ios .ach-popup-overlay, html.is-ios .ach-detail-overlay { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* 同人/创作 */ html.is-ios .ff-bottom-bar2, html.is-ios .ff-mine-abtn, html.is-ios .ff-header2, html.is-ios .ff-read-header, html.is-ios .ff-write-header, html.is-ios .ff-book-detail-header { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* 锁屏 */ html.is-ios .lock-screen-overlay, html.is-ios .lock-screen-content { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* 精灵详情 */ html.is-ios .spirit-detail-overlay, html.is-ios .spirit-detail-topbar, html.is-ios .spirit-detail-nav, html.is-ios .spirit-action-btn { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* 壁纸预览览栏导航栏 */ html.is-ios .gwp-nav, html.is-ios .gwp-input-bar, html.is-ios .gwp-pill, html.is-ios .gwp-toolbar { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* 伴侣/陪伴 */ html.is-ios .companion-header, html.is-ios .companion-card, html.is-ios .companion-detail-header { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* 终极兜底部：所layer 内带 blur 的常见）元素素类*/ html.is-ios .layer .overlay, html.is-ios .layer .panel-header, html.is-ios .layer .fixed-header, html.is-ios .layer .sticky-header { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* ============================================================ [PERF-发热v4] 不可layer 暂停所有动画面?(iOS) ============================================================ v4.1: 只对 .layer:not(.show) 生效果? 移除.tab-page:not(.active) 规则（主界面面滑动画面切换卡顿顿） ============================================================ */ html.is-ios .layer:not(.show) *, html.is-ios .layer:not(.show) *::before, html.is-ios .layer:not(.show) *::after { animation-play-state: paused !important; } /* ============================================================ [PERF-发热v4] iOS infinite 动画面画面降级别 ============================================================ */ /* 状态态气泡浮动画面：限制作次数 */ html.is-ios .status-bubble { animation-iteration-count: 3 !important; } /* 精灵系统：减少动画面画面叠*/ html.is-ios .spirit-display-emoji { animation: spiritFloat 6s ease-in-out 3 !important; } html.is-ios .spirit-glow { animation: none !important; } /* ============================================================ 45. [FIX-论坛iOS白屏] 论坛帖子详情页：输入框框框固定定 根因：iOS键盘盘弹窗口出）时会将整个layer上推导致白屏 方案：输入框框栏 position:fixed + 内容器区域预览留底部部空间距? 同时监听 visualViewport 实现键盘盘避让（JS端在app-forum.js ============================================================ */ html.is-ios #layer-forum-detail .forum-detail-actions { position: fixed !important; bottom: 0 !important; left: 0 !important; right: 0 !important; z-index: 10 !important; background: #fafafa !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; padding-bottom: env(safe-area-inset-bottom, 0px) !important; box-sizing: border-box !important; transition: bottom 0.1s ease !important; } /* 内容器区域预览留底部部空间距间距，避免被固定输入框框栏遮挡 */ html.is-ios #layer-forum-detail #forum-detail-body { padding-bottom: 65px !important; } /* 论坛私信输入框框栏同*/ html.is-ios #layer-forum-dm .forum-dm-input-bar { position: fixed !important; bottom: 0 !important; left: 0 !important; right: 0 !important; z-index: 10 !important; padding-bottom: env(safe-area-inset-bottom, 0px) !important; box-sizing: border-box !important; transition: bottom 0.1s ease !important; } html.is-ios #layer-forum-dm #forum-dm-chat-body { padding-bottom: 65px !important; } /* 心跳/脉冲类：减慢并限*/ html.is-ios .heart-indicator, html.is-ios .ow-heartbeat, html.is-ios .ach-dot, html.is-ios .sv-timer-container.active, html.is-ios .ff-cp-heart3 { animation-duration: 4s !important; animation-iteration-count: 5 !important; } /* 装饰饰性闪烁?光效果：禁*/ html.is-ios .wallet-card::after, html.is-ios .ach-sparkle, html.is-ios .gacha-reveal-card::before, html.is-ios .drift-ocean-wave, html.is-ios .drift-ocean-bottle { animation: none !important; } /* ============================================================ 50. [FIX-iOS高度度数适配配置顶-v5] 精确高度度数单位选择择器 ============================================================ 问题题：部分iOS机制作型body高度度数不精确导致： 1. 底部部白色长条（body高度度数比实际视口大，多出）的区域域变成白色 2. 顶部部与状态态栏重合（body高度度数比实际视口小，内容器上移） 解决 - PWA模式式00vh = 真实全屏高度度数（无地址工具栏栏），直接使 - 浏览栏器模式式：100dvh = 动画面态可视高度度数（排除地址栏），更精确 - 同时确保 overscroll-behavior:none 防止橡皮筋效果果）暴露底部? ============================================================ */ /* PWA模式式：使00vh（iOS PWA下vh就是真实全屏高度度数?*/ html.is-ios.is-pwa, html.is-ios.is-pwa body { height: 100vh !important; max-height: 100vh !important; overflow: hidden !important; } html.is-ios.is-pwa #device { height: 100vh !important; max-height: 100vh !important; } /* 浏览栏器模式式：使用100dvh（动画面态视口高度度数，排除Safari地址栏） */ @supports (height: 100dvh) { html.is-ios.is-browser, html.is-ios.is-browser body { height: 100dvh !important; max-height: 100dvh !important; overflow: hidden !important; } html.is-ios.is-browser #device { height: 100dvh !important; max-height: 100dvh !important; } } /* 防止底部部白色长条：确保body和device背景景色一致，溢出）区域域不可*/ html.is-ios body { background: var(--theme-bg, #f7f7f7) !important; overscroll-behavior: none !important; } html.is-ios #device { overscroll-behavior: none !important; } /* layer默认全屏：非键盘盘状态态下始终占满device */ html.is-ios:not(.keyboard-active) .layer { bottom: 0 !important; height: auto !important; } /* ============================================================ 51. [FIX-iOS图标消失-2026-06-13] 桌面图标CSS兜底 ============================================================ 问题：iOS内存压力下blob/base64 URL被回收，backgroundImage变空，图标消失 方案：当 .app-icon 没有可见内容时（无子元素、无背景图），通过伪元素显示占位图标 [FIX-图标圆圈-2026-06-14] 排除已有背景图的情况（style含background-image:url）， 避免图标正常显示时仍叠加⟳符号 ============================================================ */ html.is-ios .app-icon[data-icon-url]:empty:not([style*="background-image: url"]):not([style*="background-image:url"]) { position: relative !important; } html.is-ios .app-icon[data-icon-url]:empty:not([style*="background-image: url"]):not([style*="background-image:url"])::after { content: '⟳' !important; position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; font-size: calc(var(--app-icon-size, 60px) * 0.4) !important; color: var(--text-desktop, #999) !important; opacity: 0.5 !important; pointer-events: none !important; } /* ============================================================ [FIX-iOS线下跳顶v12] iOS 线下模式输入框：禁止 JS 动态调高，改用纯 CSS 根因：JS 每次修改 textarea height → flex 父容器 re-layout → scrollTop 归零 → 跳顶 修复：固定高度 + max-height + 内部 overflow-y:auto，flex 父容器高度不变 ============================================================ */ @supports (-webkit-touch-callout: none) { /* iOS Safari / WKWebView 专用 */ #offline-chat-input { height: 36px !important; max-height: 100px !important; overflow-y: auto !important; resize: none !important; /* 防止 iOS 自动缩放文字 */ font-size: 16px !important; } /* 确保输入栏不因内容撑高而改变 flex 布局 */ .offline-input-bar { flex-shrink: 0 !important; min-height: 0 !important; } }