当对带有 background-image 的元素使用 transform: scaleX(0) 时，若其父容器缺乏明确的定位上下文，背景图可能脱离预期位置、堆叠于视口左上角——根本原因在于 scaleX(0) 不影响 background-image 的渲染流，需通过 overflow: hidden 或建立新的层叠上下文来约束。
当对带有 `background-image` 的元素使用 `transform: scalex(0)` 时，若其父容器缺乏明确的定位上下文，背景图可能脱离预期位置、堆叠于视口左上角——根本原因在于 `scalex(0)` 不影响 `background-image` 的渲染流，需通过 `overflow: hidden` 或建立新的层叠上下文来约束。
在你的项目中，.project .img 元素设置了 transform: scaleX(0) 用于隐藏预览图，但其 background-image 并未随缩放归零而“真正消失”——CSS transform 仅改变视觉呈现，不改变元素的布局占位或背景图的绘制边界。更关键的是：当 scaleX(0) 将元素宽度视觉压缩为 0 后，其 background-image 仍按原始尺寸渲染，并因 position: static（默认）失去定位锚点，从而向上回溯到最近的已定位祖先（即 .projects），最终所有 .img 的背景图在该容器左上角重叠显示。
✅ 推荐解决方案（二选一，推荐方案一）
方案一：添加 overflow: hidden（最简洁可靠）
.project .img {
position: relative;
transform: scaleX(0);
transition: 0.3s ease;
height: 100px;
width: 200px;
overflow: hidden; /* ? 关键修复：裁剪超出内容区域的背景图 */
transform-origin: right;
}overflow: hidden 强制创建一个块级格式化上下文（BFC），使 .img 成为独立的渲染容器，确保 background-image 严格限制在其盒模型内，即使 scaleX(0) 后视觉宽度为 0，背景图也不会“溢出”。
方案二：为 .project 设置 position: relative
.project {
position: relative; /* ? 创建新的定位上下文 */
height: 15svh;
min-height: 150px;
width: 70vw;
display: flex;
margin-left: 10vw;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid var(--color3);
}此举让每个 .img 的 background-image 相对于其直接父容器（.project）定位，避免回溯到顶层 .projects，从而消除堆叠现象。
⚠️ 注意事项与补充建议
- 不要依赖 visibility: hidden 或 opacity: 0 替代 scaleX(0)：二者虽能隐藏内容，但无法实现你所需的“从右向左展开”动效；scaleX(0) + transform-origin: right 是正确选择，只需配合 overflow: hidden 即可安全使用。
- 避免滥用 animation-timeline: scroll(root block)：该属性目前属实验性特性（Chrome 120+ 支持但存在兼容性风险），且与 transform 动画叠加时可能触发渲染异常。如非必要，建议改用 Intersection Observer 实现滚动触发动画。
-
优化性能：background-size: contain 在 scaleX(0) 下仍会计算渲染，可考虑在 scaleX(0) 时临时移除背景图（如通过 CSS 类切换），进一步减少 GPU 负担：
.project .img.hidden { background-image: none; } .project:hover .img.hidden { background-image: var(--img-url); }
综上，问题本质是 CSS 渲染层叠规则与 transform 行为的交互结果，而非浏览器 Bug。添加 overflow: hidden 是最小侵入、最高兼容性的修复方式，一行代码即可稳定解决预览图错位问题。
