iOS端因canvas导致Off-canvas菜单布局失效的解决办法

核心原因 #

iOS Safari对CSS堆叠上下文的处理和其他浏览器存在差异，尤其是当元素用到transform、opacity这类属性时，会创建独立的堆叠上下文，导致z-index失效——这大概率是带动画的Canvas引发的问题。

具体解决步骤 #

• 隔离Canvas的堆叠上下文
  动画Canvas如果使用了transform、半透明opacity或者filter属性，会将自身变成一个独立的堆叠容器，内部元素层级无法突破，外部菜单也无法覆盖。给Canvas的容器添加isolation: isolate;，把它的堆叠范围限制在自身内部：

  /* 替换成你实际的Canvas容器类名 */
  .your-animation-canvas-container {
    isolation: isolate;
  }
  

• 强制拉高菜单的堆叠层级
  Neve主题的Off-canvas菜单默认类是.nv-off-canvas-wrap，给它设置足够高的z-index，同时避免父元素创建堆叠上下文：

  .nv-off-canvas-wrap {
    position: fixed !important; /* 用fixed替代sticky，规避iOS定位bug */
    z-index: 99999; /* 数值足够大，确保超过页面其他元素 */
    transform: none !important; /* 清除主题默认可能添加的transform，防止创建堆叠上下文 */
  }
  

  注意：菜单内部子元素不要单独设置z-index，让父容器统一管控层级即可。

• 触发iOS硬件加速修正定位
  iOS Safari对fixed定位元素偶尔会出现计算偏差，添加will-change: transform;强制浏览器用硬件加速渲染，确保层级计算正确：

  .nv-off-canvas-wrap {
    will-change: transform;
  }
  

• 排查主题默认样式冲突
  开启iOS Safari的开发者选项（需在系统设置中开启），用Web Inspector查看页面元素的堆叠顺序，检查是否Neve主题的头部导航或其他元素z-index高于菜单，找到后针对性调低对应元素的z-index值。

验证方法 #

1. 在iOS Safari中打开网站，触发Off-canvas菜单，确认是否正常覆盖在Canvas上方。
2. 滚动页面，测试菜单是否保持正确层级不被其他元素遮挡。
3. 检查Canvas的动画效果是否未受影响。

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