当移动浏览器地址栏隐藏/显示导致 viewport 高度变化时，fixed 定位元素会因 top: 0 参照系突变而发生生硬跳动；本文介绍通过 CSS transition 属性对 top（或隐式触发重排的布局属性）添加平滑过渡，有效缓解该视觉抖动问题。
当移动浏览器地址栏隐藏/显示导致 viewport 高度变化时，fixed 定位元素会因 `top: 0` 参照系突变而发生生硬跳动；本文介绍通过 css `transition` 属性对 `top`（或隐式触发重排的布局属性）添加平滑过渡，有效缓解该视觉抖动问题。
在移动端 Web 开发中，一个常见但易被忽视的体验问题是：当用户向下滚动页面时，Safari iOS、Firefox iOS 或 Bromite 等浏览器会自动隐藏地址栏，从而扩大可视区域（即 window.innerHeight 增大），此时 position: fixed; top: 0 元素的“顶部锚点”会相对于新的 viewport 顶部重新定位——但由于该变化由浏览器原生行为触发，不经过 CSS 属性显式变更，因此默认无过渡效果，造成图像或导航栏的突兀位移。
幸运的是，现代浏览器支持对 top、left、transform 等可动画化属性自动启用过渡，只要该属性在重排（reflow）过程中发生了数值变化，且已声明 transition。因此，解决方法非常简洁：
img {
position: fixed;
top: 0;
object-fit: cover;
z-index: -1;
/* 关键：为所有可变属性启用过渡 */
transition: top 500ms ease, transform 500ms ease;
}
✅ 推荐写法：明确指定
transition-property（如top），避免transition: all 500ms引发意外性能开销或不可控动画。
若仅设置 img 的过渡仍无效（例如某些浏览器对 top 的动态计算未触发过渡），可进一步将 transition 应用于根级容器，促使更稳定的重绘响应：
html, body {
transition: height 500ms ease, margin 500ms ease;
}
不过更健壮的实践是改用 transform: translateY() 替代 top，因其硬件加速友好且对 viewport 变化更敏感：
img {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -1;
/* 使用 transform 实现更可靠的平滑过渡 */
transform: translateY(0);
transition: transform 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
⚠️ 注意事项：
-
transition对vh单位本身无效（height: 100vh不会过渡），因此需确保动画目标是top/transform等可插值属性； - 避免在
overflow: hidden容器内依赖100vh高度做布局，因其在地址栏切换时会失准；推荐结合min-height: 100dvh（动态 viewport height）提升兼容性； - Safari iOS 对
fixed+transform组合偶有渲染延迟，可添加will-change: transform进行提示（慎用，仅在必要时）。
总结：无需 JavaScript 监听 resize 或 scroll 事件，纯 CSS 即可通过合理使用 transition + transform 实现 viewport 动态变化下的视觉柔化。核心在于理解——浏览器对 fixed 元素的重定位本质是一次 top 值的隐式更新，而 CSS 过渡机制对此完全支持。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
