层叠上下文不会直接禁用gpu加速，但会干扰图层提升逻辑：父容器创建层叠上下文后，子元素即使使用transform也可能因合成边界被截断而无法独立成层，导致gpu加速失效。
层叠上下文会悄悄禁用GPU加速吗
不会直接禁用，但会干扰图层提升逻辑——当父容器创建了层叠上下文，子元素即使写了transform，也可能因合成边界被截断而无法独立成层。
浏览器在决定是否为某个元素创建独立合成层（即触发GPU加速）时，会检查它是否处于一个「可提升」的上下文中。一旦父级已建立层叠上下文（比如设置了opacity: 0.99或transform: translateX(1px)），该容器就成为合成边界，其内部子元素的transform变更往往只能在该层内重绘，无法升到更高层级交由GPU合成。
-
opacity: 0.99本身就会创建层叠上下文，同时又是个GPU友好属性；但它会让整个子树“困”在同一个合成层里，失去单独升层机会 -
transform: translateZ(0)在父级上使用，本意是强制升层，结果反而把所有子元素打包进一个大纹理，GPU要处理更大区域，性能反而下降 - 用
will-change: transform对子元素生效的前提是：它的祖先没提前切走合成流——否则提示会被忽略
哪些HTML/CSS写法会意外创建层叠上下文
不是只有z-index才管层叠顺序，很多看似无害的样式会静默创建层叠上下文，从而切断GPU加速路径。
这些属性只要出现在父容器上，就会让子元素的GPU加速行为受限：
-
opacity值小于1（包括opacity: 0.999） -
transform不等于none（哪怕只是transform: rotate(0.01deg)） -
filter有值（哪怕filter: blur(0)或filter: brightness(1)） -
will-change: transform或will-change: opacity -
position: fixed或position: absolute+z-index（哪怕z-index: auto）
特别注意：backface-visibility: hidden和perspective也会触发，但容易被忽略。
怎么验证层叠上下文是否阻断了GPU加速
不能只看动画是否流畅，得用Chrome DevTools确认图层是否真正分离。
操作步骤：
- 打开
chrome://gpu，确认Canvas和Rasterization状态全绿 - 按
Cmd+Shift+P（Mac）或Ctrl+Shift+P（Win），输入Rendering，勾选Layer borders和Paint flashing - 触发目标动画，观察：
- 目标元素是否有橙色边框？没有 → 可能被父级层叠上下文锁死
- 橙色边框是否覆盖了整块父容器？说明子元素没单独成层，而是被“打包”进去了
- 动画区域大面积绿色闪烁？说明仍在主线程重绘，未进入GPU合成阶段
- 进一步验证：打开
Layers面板（More Tools → Layers），搜索目标元素，看Reason字段是不是layer-for-transform；如果是layer-for-container或空白，则大概率被隔离了
React/Vue中动态class切换如何避开层叠上下文陷阱
框架里靠class切换控制显隐或位移，很容易在不经意间跨层叠上下文切换样式，导致GPU加速失效。
典型错误模式：
.card { opacity: 0.99; } /* 父级已建层叠上下文 */
.card.active { transform: translateX(100px); } /* 子元素动画仍卡在父层内 */
正确做法是保持“提升层级”的一致性：
- 统一用
transform做位移，避免混用left/top和transform - 父容器不要加
opacity或filter等隐式创建层叠上下文的属性，改用rgba()背景或clip-path替代 - 若必须用淡入效果，改用
transition: opacity+ 独立包装层：<div class="fade-wrapper"><div class="content">...</div></div>，只对.fade-wrapper设opacity，让.content保留在文档流顶层 - 用JS动态控制
style.transform比切换class更可控，能绕过CSS层叠上下文继承链
最易被忽略的一点：transform: scale(1)这种“看似没变”的写法，只要值不是none，就会创建层叠上下文——别把它当占位符用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
