移动端汉堡菜单按钮持续抖动问题排查求助

排查与修复方案 #

1. 禁用移动端点击高亮效果 #

移动端浏览器默认的点击高亮会导致元素出现短暂视觉偏移，添加以下CSS消除该影响：

.hamburger-btn {
  -webkit-tap-highlight-color: transparent;
  tap-highlight-color: transparent;
}

2. 固定按钮尺寸，避免重绘回流 #

确保按钮宽高固定，防止内部状态变化触发页面重排：

.hamburger-btn {
  width: 40px;
  height: 40px;
  overflow: hidden;
  user-select: none;
}

3. 用transform替代位置偏移动画 #

如果按钮动画使用了top/left这类触发重绘的属性，替换为transform，它不会引发页面重排：

/* 替换原位置偏移代码 */
.hamburger-btn.active {
  transform: translateY(10px);
}

4. 固定打字动画容器高度 #

typed.js的打字动画若导致容器高度变化，会间接触发页面重排影响按钮。给打字容器设置固定高度：

.typed-container {
  height: 60px;
  overflow: hidden;
}

5. 清理冲突的动画属性 #

检查按钮是否同时绑定了多个transition/animation，保留必要的动画属性，避免叠加冲突：

.hamburger-btn {
  transition: transform 0.3s ease;
}

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