CSS与Bootstrap项目配置z-index的容器滚动后渲染消失问题排查

这是Chromium内核浏览器已知的GPU合成层渲染异常，并非z-index配置逻辑本身错误，核心触发逻辑如下：

• 固定满屏的.bg-img-repeat元素会被浏览器自动识别为独立GPU合成层，全程贴在视口底层渲染；
• 带position: relative + 自定义z-index的主容器，同样会被浏览器拆分出独立的GPU合成层，和背景层并行参与渲染流程；
• 当页面滚动到底部停留较长时间、触发浏览器静态画面缓存优化时，部分版本的浏览器会出现合成层索引错乱，错误将主容器的合成层判定为“被背景层遮挡”，直接跳过该区域的渲染流程。
• 这种异常的典型特征是：元素本身DOM位置、样式参数完全没有变化，只要触发一次浏览器强制重绘（调整窗口大小、在DevTools中修改任意样式参数），浏览器就会重新计算合成层关系，容器立刻恢复显示——这和纯CSS层叠逻辑冲突导致的持续遮挡有本质区别。

通过CSS规范层面的层叠上下文隔离，固定两层的渲染优先级，从根源避免合成层缓存错乱：

1. 建立可靠的层叠隔离规则
   不要把z-index直接绑在内容容器上，而是给主内容区块的父级设置独立的层叠边界，避免和固定背景层的层叠关系被浏览器自动调整：

   .show-portfolio {
     position: relative;
     z-index: 1;
     isolation: isolate; /* 创建独立层叠上下文，与背景层完全隔离 */
   }
   
   .show-portfolio .container {
     /* 删除原本设置的 z-index: 5; 这行 */
     position: relative;
     /* 其余原有样式全部保留即可 */
   }
   

2. 稳定背景层的合成层缓存范围
   给固定定位的背景层添加强制合成层声明，避免缓存区块范围异常扩大，错误覆盖主内容区域：

   .bg-img-repeat {
     /* 原有样式全部保留，新增以下属性 */
     transform: translateZ(0);
     will-change: transform;
   }
   

• isolation: isolate会按照CSS规范的明确规则，让.show-portfolio区块的所有子元素渲染优先级固定高于背景层，不受浏览器自动合成逻辑的随机影响；
• transform: translateZ(0)会强制浏览器给背景层划定固定大小的缓存区块，不会在滚动过程中随意扩大缓存范围，错误把主容器的渲染区域合并到背景层的缓存队列里；
• 修复后不需要额外添加复杂的重绘触发逻辑，滚动、鼠标移动等操作不会再触发合成层索引错乱的问题。

内容的提问来源于stack exchange，提问作者niodev