根本原因是overflow: hidden临时禁用滚动条导致视口宽度突增，引发布局偏移；应使用scrollbar-gutter: stable both-edges预留空间，避免body重排。

汉堡菜单展开时页面左右晃动

根本原因是 overflow: hidden 在弹出时临时禁用滚动条，导致视口宽度突增，所有流式元素被“向右推”。这不是动画不流畅，而是布局基准变了。

• 检查 body 是否在菜单打开时加了 overflow: hidden 却没预留滚动条空间
• 用 scrollbar-gutter: stable both-edges 在 html 或 body 上提前占位，让滚动条存在与否都不影响布局
• 避免只对 body 加 overflow: hidden —— 它会移除竖向滚动条，触发重排；应配合 padding-right 补偿（但不如 scrollbar-gutter 可靠）
• Chrome DevTools → Elements → 选中 body，看 Computed 的 width 值在菜单开关前后是否变化，变就是它

下拉项高度突变导致内容上跳

常见于用 max-height + overflow: hidden 做过渡，但初始值设为 0，展开时从 0px 跳到具体高度，浏览器无法平滑插值，视觉上就是“弹一下”。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 改用 height + transition，初始 height 设为折叠态精确高度（如 44px），展开态设为内容实际高度（用 DevTools 测量 .mobile-menu 展开后的 offsetHeight）
• 确保父容器没有 align-items: center 或 justify-content 等 Flex/Grid 对齐属性干扰高度计算
• 别用 visibility: hidden + opacity: 0 混合控制——它们不改变布局，但若和 height 过渡同时用，可能因渲染顺序错乱导致闪帧

移动端双击缩放后菜单定位漂移

iOS Safari 和部分安卓 WebView 在缩放后会重新计算行盒（line box），浮动或绝对定位的汉堡按钮如果锚点不稳，就会偏移。这不是 bug，是缩放触发的重排。

• 汉堡图标容器必须有 position: relative，且该声明不能被媒体查询覆盖（比如在 @media (max-width: 768px) 里漏写了）
• 菜单弹层用 position: absolute 时，确保其 top/left 基准来自这个 relative 父容器，而不是 body
• 禁用 text-size-adjust: auto，改用 text-size-adjust: none 防止系统字号放大干扰按钮尺寸计算
• 避免用 em 或 % 设置汉堡图标的 width/height，统一用 px 或 rem（配合根字体大小固定）

点击遮罩层关闭菜单时触发页面滚动回顶

遮罩层（.overlay）点击事件默认冒泡，如果它下面有可滚动区域，且未阻止默认行为，iOS 上可能意外触发 scrollTo(0,0)。

• 给遮罩层加 touch-action: none，禁用原生滚动手势穿透
• 绑定 click 事件时显式调用 event.preventDefault() 和 event.stopPropagation()
• 别依赖 pointer-events: none 让遮罩“透传”，它会让点击落到下方元素，反而更易触发意外行为
• 验证：真机上长按遮罩层，看是否出现“复制/搜索”菜单——出现说明 pointer-events 没生效或被覆盖

真正难的不是写对一行 transition，而是所有相关容器都得保持“不参与重排”的状态：滚动条空间、高度锚点、缩放基准、事件隔离，缺一不可。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！