全屏背景视频需设position: fixed + width: 100vw; height: 100vh + object-fit: cover；z-index失效因video创建独立堆叠上下文，应加isolation: isolate；移动端需muted、autoplay、playsinline三属性并存。
全屏背景视频的 object-fit 和 position: fixed 冲突问题
用 video 做全屏背景时，常见“视频拉伸变形”或“上下/左右留黑”，本质是 object-fit 和定位方式没配对。直接设 position: fixed + width: 100vw; height: 100vh，再加 object-fit: cover 才能真正覆盖全屏且不压扁画面。
容易踩的坑：object-fit 对 position: absolute 的父容器也生效，但若父容器没设宽高（比如只靠 inset: 0），部分浏览器会误判尺寸导致裁切异常；Chrome 115+ 在 fixed 下对 object-fit 的渲染更严格，必须显式声明 width/height。
- 始终给
video元素设width: 100%; height: 100%，再配合object-fit: cover - 避免用
top: 0; left: 0; right: 0; bottom: 0替代width/height，尤其在fixed场景下 - 如果视频宽高比和视口差异极大（比如竖屏手机播横屏视频），
cover必然裁边，此时需预估关键内容区域，不能依赖居中自动适配
z-index 失效：遮罩层被视频压在底下
视频默认有独立合成层（compositing layer），即使设了 z-index: 999，遮罩 div 仍可能被盖住——这不是层级数字问题，而是 stacking context 断裂。
根本原因是 video 元素触发了隐式 GPU 加速（尤其加了 transform 或 will-change），创建了新 stacking context，而你的遮罩如果在另一个 context 里，z-index 就失去跨 context 比较能力。
立即学习“前端免费学习笔记（深入）”；
- 给遮罩层父容器（比如
.overlay-wrapper）加isolation: isolate，强制它成为独立 stacking context 的根 - 确保遮罩层和视频同级或直接子级，不要隔多层嵌套布局容器
- 避免给视频本身加
transform: translateZ(0)或will-change: transform，除非真需要性能优化；否则删掉，让浏览器按默认 stacking order 渲染
移动端自动播放失败导致遮罩错位
iOS Safari 和 Android Chrome 要求视频自动播放必须满足：静音（muted）、用户手势触发、且 playsinline 属性存在。漏掉任意一项，video 就不会加载，自然没有尺寸，后续基于它的遮罩定位（比如 position: absolute 相对于 video）就全乱。
典型现象：PC 正常，手机上遮罩偏左上角、高度为 0、或整个背景空白。
- 必须同时设置
muted、autoplay、playsinline三个属性 - 用
preload="metadata"减少首帧等待时间，但别用preload="auto"，移动端会阻塞页面加载 - 遮罩层不要依赖
video的offsetHeight做 JS 计算，改用 CSSaspect-ratio或固定宽高比容器兜底
字体/按钮在视频上显示模糊
不是抗锯齿问题，是视频层和文字层的像素对齐错位。当视频用了 transform: scale() 或父容器有非整数 scale（比如 zoom、devicePixelRatio 导致的 subpixel 渲染），文字边缘就会发虚。
尤其在 macOS + Safari 组合下明显，因为 WebKit 对 video compositing 的 subpixel 处理更激进。
- 遮罩层里的文字、按钮全部用
backface-visibility: hidden触发单独图层，隔离渲染 - 禁用任何作用于遮罩父容器的
transform（包括scale、rotate），哪怕只是动画过渡 - 如果必须做缩放适配，用
font-size+rem配合媒体查询，而不是transform: scale()
最麻烦的其实是视频编码本身——H.264 的 chroma subsampling（比如 4:2:0）会让边缘颜色过渡软化，叠加到浅色文字上就是灰边。这时候得换 color: #000 + text-shadow: 0 0 8px rgba(0,0,0,.6) 强制压住，别指望 CSS 滤镜修。
