更新页面效果

.workbuddy/memory/MEMORY.md

@@ -6,10 +6,11 @@
 - 配置存后端单条 JSON，前后端均做旧字段兼容（musicUrl→musicList、缺省 height/borderStyle/singleWidth/速度参数）。
 
 ## 关键坑（不要再踩）
-1. **滚动容器绝不能加 `scroll-smooth`**：CSS smooth 会劫持 JS 的 scrollTop 赋值，free 自动滚动会严重卡顿。snap 翻页用自研 rAF 动画（`smoothScrollTo`，时长=pageSwitchDuration）。
-2. **动画摇曳禁用 margin-left**（每帧触发布局）：外层跑位移、内层元素跑 transform 摇曳（petal/petal-inner、heart-bubble/heart-inner 模式）。
-3. **相册页高与图片容器要联动**：页高可能 auto/80vh，图片容器写死 vh 会脱钩溢出 → 用 clamp 封顶 + 图片贴容器边缘。
-4. `gf-frame` 不设 width/height（尺寸交给版式包装类），`gf-natural` 用于保持原始比例。
+1. **`gf-frame` 绝不能设 position/width/height**：frames.css 在 Tailwind 之后加载，同优先级后者胜出——`position:relative` 曾把 overlap 版的 `absolute` 静默冲掉（元素退回静态流，right/bottom 失效），这是错落双图溢出问题反复出现的总根因。布局定位只交给 Tailwind 工具类。
+2. **滚动容器绝不能加 `scroll-smooth`**：CSS smooth 会劫持 JS 的 scrollTop 赋值，free 自动滚动会严重卡顿。snap 翻页用自研 rAF 动画（`smoothScrollTo`，时长=pageSwitchDuration）。
+3. **动画摇曳禁用 margin-left**（每帧触发布局）：外层跑位移、内层元素跑 transform 摇曳（petal/petal-inner、heart-bubble/heart-inner 模式）。
+4. **相册页高与图片容器要联动**：页高可能 auto/80vh，图片容器写死 vh 会脱钩溢出 → 用 clamp 封顶 + 图片贴容器边缘。
+5. `gf-natural` 保持原始比例；单图铺满用负边距出血（width:calc(100%+48px); margin:0 -24px 抵消 section p-6）。
 
 ## 环境
 - 本机"安全删除"损坏：rm 常失败，vite build 用 `--outDir dist-chk-<ts>` 新目录验证，临时目录需手动清。