解决长文章毛玻璃效果失效的问题

问题描述

最近在优化博客时发现一个奇怪的现象：当文章内容过长时，毛玻璃效果会突然消失，卡片从模糊的玻璃效果变成了半透明的普通背景。

这个问题困扰了我很久，因为：

桌面端正常，移动端异常
部分文章正常，部分文章异常
真机效果和浏览器模拟器还不一样
刷新页面有时正常，有时不正常

排查过程

第一阶段：怀疑是移动端兼容性

一开始我以为是移动端浏览器对 backdrop-filter 的支持问题，因为 iOS Safari 确实有一些已知的 bug。

尝试了各种方案：

CSS 媒体查询降级
伪元素实现（用 ::before 伪元素应用模糊效果）
延迟加载（Intersection Observer）
纯半透明背景降级
后端分割文章内容

但都没有完全解决问题，反而引入了更多问题：

伪元素导致白色过亮
延迟加载影响视觉体验甚至由于动画问题导致卡顿
后端分割需要修改API

第二阶段：发现与设备无关

后来发现桌面端也有问题，不只是移动端。这说明问题根源不在设备兼容性。甚至怀疑到是浏览器的问题，是不是因为字符串高度太高？因为某些文章是因为存储了base64转码的图片导致一篇文章内容长度达到了一百万之多，首页监测的文章总字数达到了两千万，之前一度以为我的笔记内容多，结果是base64转码。。。。。。
后面根据文章总字数写了个二分法的脚本用于生成文章字数，一度二分下去，查到了文章总字数为20503时，css玻璃效果消失，于是后面花了大量时间在这里根据文章字数设计智能方案裁剪卡片。真他妈草了
最后以失败告终，总会有那么好几篇文章样式失效

二分法脚本:

# -*- coding: utf-8 -*-
import os

path = os.path.join("D:\\leap\\Desktop", "test.txt")

print("=== 二分法测试字符阈值 ===")
print("流程：生成文件 → 粘贴到文章 → 看效果 → 告诉我结果")
print("输入：1=样式变了  2=样式没变  q=退出")
print()

low = 1000
high = 200000
step = 1

while low <= high:
    mid = (low + high) // 2
    print(f"\n[第{step}轮] 生成 {mid} 个字符")

    text = "a" * mid
    with open(path, "w", encoding="utf-8") as f:
        f.write(text)
    print(f"已写入 test.txt")

    choice = input("粘贴后看效果 → (1=变了  2=没变  q=退出): ").strip().lower()

    if choice == 'q':
        break
    elif choice == '1':
        # 样式变了，说明阈值在更小范围
        high = mid - 1
        print(f"→ 阈值在 [{low}, {mid-1}] 之间")
    elif choice == '2':
        # 样式没变，说明阈值在更大范围
        low = mid + 1
        print(f"→ 阈值在 [{mid+1}, {high}] 之间")
    else:
        print("请输入 1 或 2 或 q")
        continue

    step += 1

print(f"\n最终范围: {low} ~ {high}")

第三阶段：找到真正原因

我开始系统性地测试，用开发者工具逐个测量文章卡片的高度。

关键发现：

模糊效果是否失效取决于卡片高度，不是设备类型（我真他妈草了）
临界点在 14800-14900px 左右，依旧无敌二分法查出来的
超过这个高度，浏览器会自动禁用 backdrop-filter

根本原因：
这是浏览器的性能优化机制。backdrop-filter 是一个计算密集型的效果，当元素尺寸过大时，浏览器为了防止卡顿，会自动降低或禁用这个效果。

解决方案

既然高度是关键，那就按高度来分割文章！
但是吧，实际设计思路不能以高度来裁剪，而是设备的宽度，因为宽度影响到换行，换行影响到容器高度，但是高度依旧需要作为一个兜底的方案

核心思路

先渲染整篇文章
检测实际 DOM 高度
如果超过阈值，找到合适的分割点
分割后重新检测，递归直到每块都低于阈值

分割策略

找分割点时，按优先级处理：

优先找最接近中间的 ## 标题
其次找最接近中间的 ### 标题
再找最接近中间的段落边界（双换行）
找代码块结束标记之后的位置（避免分割代码块）
最后硬切到中间位置

关键优化：

分割点必须在代码块外部，否则会导致代码块未闭合
分割点必须在表格外部，否则会导致表格结构破坏
使用 isInCodeBlock 和 isInTable 函数检测分割点安全性

动态阈值

不同设备的屏幕宽度不同，文本换行也不同，所以需要动态调整阈值：

手机（< 768px）：7000px
平板（768-1024px）：12000px
电脑（> 1024px）：14000px

原理：

屏幕越窄 → 文本换行越多 → 容器高度越高
所以手机需要更低的阈值，不只是宽度，因为左右侧mian的内边距也会缩小卡片宽度，最终是为了避免分割后某块还是太高

防止遗漏

为了确保图片加载后高度变化也能正确分割，我添加了两个保障机制：

ResizeObserver - 监听内容区域高度变化
图片加载事件 - 监听图片加载完成

二次检测：
分割后再次检测每块高度，如果某块还是超过阈值，继续分割该块。最多循环5次，防止死循环导致页面崩掉

最终效果

✅ 桌面端毛玻璃效果完美显示
✅ 移动端也能正常显示
✅ 每块卡片高度都在安全范围内
✅ 分割点在标题或段落边界，语义完整
✅ 代码块和表格不会被截断
✅ 支持递归分割，最多分成 8 块
✅ 图片加载后自动重新检测

技术细节

代码块检测

const isInCodeBlock = (content: string, pos: number): boolean => {
  const codeBlockRegex = /```[\s\S]*?```/g
  let match
  while ((match = codeBlockRegex.exec(content)) !== null) {
    // 分割点在代码块内部（不在开始和结束标记上）
    if (pos > match.index && pos < match.index + match[0].length) {
      const afterStart = pos - match.index
      const beforeEnd = match.index + match[0].length - pos
      if (afterStart > 3 && beforeEnd > 3) {
        return true
      }
    }
  }
  return false
}

高度检测

const detectHeight = (): number => {
  const container = document.querySelector('.article-content')
  return container?.offsetHeight || 0
}

动态阈值

const getThreshold = (): number => {
  if (import.meta.server) return 14000
  const width = window.innerWidth
  if (width < 768) return 7000   // 手机
  if (width < 1024) return 12000  // 平板
  return 14000  // 电脑
}

补充:长文章自动分割说明
当文章内容超过屏幕高度阈值时，系统会自动分割为多个卡片以保持毛玻璃效果。
• 连接处：圆角、边框、阴影会被自动隐藏，使卡片视觉上连为一体
• 顶部/底部：仍使用下方设置的圆角和边框样式
• 其他参数：模糊、背景透明度、内边距等在所有卡片上均生效

经验总结

找到问题的本质：不是代码问题，不是兼容性问题，而是性能限制问题
换个角度思考：既然高度是关键，那就按高度来分割
动态适配：不同设备需要不同的阈值
多重保障：使用 ResizeObserver 和图片加载事件确保不遗漏
边界情况处理：分割点必须在代码块和表格外部
递归检测：分割后再次检测高度，确保每块都达标

再有这个问题的话，不干了，移动端扔掉。。。

长文章毛玻璃失效问题排查与正文卡片智能分割的解决方案

解决长文章毛玻璃效果失效的问题

问题描述

排查过程

第一阶段：怀疑是移动端兼容性

第二阶段：发现与设备无关

二分法脚本:

第三阶段：找到真正原因

解决方案

核心思路

分割策略

动态阈值

防止遗漏

最终效果

技术细节

代码块检测

高度检测

动态阈值

经验总结

评论