缩放容器内Video与z-index问题：部分div消失

嘿，这个坑我之前踩过！Chrome和Safari在处理带transform: scale()的容器时，内部的video元素（作为特殊媒体合成层）和高z-index绝对定位元素容易出现层级错乱，尤其特定缩放比例下会直接把高z-index元素“吞”掉。结合你不能给video设负z-index、必须用overflow:hidden的限制，给你几个亲测有效的解决方案：

• 强制高z-index元素进入独立合成层
  给消失的绝对定位元素添加合成层触发属性，让浏览器单独渲染它，避免被video的合成层覆盖。代码示例：

  .your-high-z-index-element {
    position: absolute;
    z-index: 999;
    will-change: transform; /* 推荐用这个，更符合标准 */
    /* 或者用 transform: translateZ(0); 效果类似，但will-change更优雅 */
  }
  

  原理：will-change会提前通知浏览器该元素需要独立合成，彻底避开和video的渲染层冲突。

• 给缩放容器添加3D上下文
  通过开启容器的3D渲染上下文，修正内部元素的层级排序逻辑。代码示例：

  .scaled-container {
    transform: scale(0.75); /* 你的目标缩放值 */
    overflow: hidden;
    transform-style: preserve-3d;
    perspective: 1px; /* 触发3D上下文的必要小值 */
  }
  

  原理：preserve-3d会让容器内所有元素基于3D空间计算层级，避免2D合成时的bug，perspective是激活3D上下文的关键。

• 给video套独立合成层容器
  如果上面两种方法无效，试试把video放到一个单独的容器里，让video也进入独立合成层，调整浏览器的合成层排序：

  .video-wrapper {
    transform: translateZ(0);
  }
  

  对应的HTML结构：

  <div class="scaled-container">
    <div class="video-wrapper">
      <video src="your-video-source.mp4"></video>
    </div>
    <div class="your-high-z-index-element">需要显示的元素</div>
  </div>
  

  原理：让video和高z-index元素都处于独立合成层，浏览器会正确识别它们的z-index关系，不会因为缩放导致层级错乱。

这些方案都是针对浏览器合成层渲染的特定bug，不同缩放比例可能需要微调，但大部分场景下都能解决问题，优先试试第一个方法，改动最小~

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