iOS Safari中100vh因地址栏收起/展开跳变，应优先使用100dvh，兼容方案为min-height: 100vh; min-height: 100dvh;，避免JS监听resize导致卡顿。
video元素加position: fixed后为什么还有白边
白边不是object-fit: cover没起作用，而是父容器或video自身尺寸没真正撑满视口。iOS Safari 中100vh会把地址栏高度算进去，滚动时地址栏收起/展开导致vh值跳变；Android部分WebView也有类似行为。
必须用min-width: 100vw和min-height: 100vh代替width: 100%和height: 100%——前者设的是“最小底线”，不会被浏览器动态视口计算拖垮；后者依赖初始包含块，在fixed定位下反而容易失准。
-
video必须设display: block，否则object-fit在旧版Chrome或Safari中可能不生效 - 别给
video设width: 100%; height: 100%，它会强制拉伸破坏宽高比；应配width: auto; height: auto -
body { margin: 0; }必须加，否则默认8px外边距会在四边留出白缝
如何让video真正“贴”在视口上不随滚动偏移
position: fixed是唯一可靠方案。position: absolute看似简单，但一旦祖先元素设了transform、filter或will-change，就会创建新层叠上下文，导致z-index: -1失效、视频被截断或错位。
固定锚点要四边写全：top: 0; right: 0; bottom: 0; left: 0，缺一不可。只写top和left会导致宽度/高度不足，尤其在横屏切换时暴露问题。
立即学习“前端免费学习笔记（深入）”；
- 加
z-index: -1确保视频在内容层之下，但注意：若父级有transform，这个z-index可能不跨上下文生效 - 加
pointer-events: none，避免视频拦截点击事件，否则按钮点不了 - 不要用
background-attachment: fixed套在div上模拟——它不适用于video，且iOS上易卡顿
移动端Safari中100vh跳变怎么稳住
iOS Safari 地址栏显示/隐藏会实时重算vh，造成背景突然缩放或滚动条闪现。2026年主流解法是用100dvh（dynamic viewport height），Chrome 105+、Safari 16.4+已支持。
兼容 fallback 方案是组合写：min-height: 100vh; min-height: 100dvh;。浏览器会取第一个有效值，老版本用vh，新版本自动升到dvh。
- 别在
body或html上直接设height: 100vh来控制视频——它不可靠，且会污染全局布局流 - 不推荐JS动态监听
resize或scroll去重设高度，iOS上scroll事件触发过于频繁，易卡顿 - 如果必须支持 iOS 15 以下，可用
min-height: 100%+height: 100%双写，前提是祖先链所有父级都设height: 100%
z-index: -1为什么有时还是盖不住内容
根本原因不是z-index数值不够，而是层叠上下文（stacking context）被意外创建。只要某个祖先元素用了transform、opacity < 1、filter、will-change或isolation: isolate，就会隔离子元素的z-index作用域。
比如导航栏用了transform: translateY(-10px)，它和video就不再同属一个层叠上下文，各自z-index互不影响。此时调高按钮的z-index毫无意义。
- 检查所有祖先元素的computed style，重点看
transform和opacity - 把
video直接挂到body最开头，减少中间层级；同时确保内容区域没有无意触发新层叠上下文的CSS - 必要时用
isolation: auto显式关闭不必要的层叠隔离
transform时，背景视频是否还严丝合缝地贴在视口上——这些边界情况往往要等上线后才暴露。 
