Bulma与scrollTrigger在移动端触摸模拟及真机环境下样式动画异常问题

问题排查与解决方案 #

仅保留Bulma时移动端/触摸模拟样式异常 #

• 检查视口meta标签配置：确认HTML头部存在正确的viewport设置，漏写、错写该标签会导致真机视口计算和桌面调试模式不一致，参考配置为：

  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  

• 处理触摸设备伪类冲突：Bulma默认的:hover、:active样式在触摸设备下会出现持久化触发、优先级异常的问题，可通过媒体查询限定hover类仅在桌面端生效：

  @media (hover: hover) and (pointer: fine) {
    /* 这里放需要仅在桌面端生效的hover样式 */
  }
  

接入GSAP/ScrollTrigger后异常恶化 #

• 修复移动端动态视高计算偏差：移动端浏览器地址栏滚动收起/展开会导致视口高度动态变化，ScrollTrigger默认依赖的window.innerHeight会随之变动，导致触发高度计算错误，可在初始化前添加配置关闭该场景下的自动刷新：

  ScrollTrigger.config({ ignoreMobileResize: true })
  

• 同步媒体查询与ScrollTrigger刷新时机：CSS层面的媒体查询修改元素尺寸、位置后，ScrollTrigger不会自动感知变化，需要在断点切换时手动调用ScrollTrigger.refresh()更新所有触发器的位置参数。
• 汉堡菜单显示异常修复：检查动画补间是否修改了汉堡菜单的transform、opacity或z-index属性，触摸设备下transform会创建新的层叠上下文，导致原有层级失效，可给汉堡菜单添加isolation: isolate和更高层级的z-index值手动置顶。

如果以上方案无法解决问题，可提供最小可复现代码片段进一步定位。

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