Vue 2+Vuetify 2模板在Safari中导航按钮加载后消失求助

• 调整动态样式的应用时机
  Safari渲染引擎处理动态内联样式的时序和其他浏览器不同，overflow:auto这类触发重排的属性如果在DOM未完全渲染时注入，容易导致元素被错误隐藏。可以用Vue的$nextTick确保DOM渲染完成后再设置样式：

  mounted() {
    this.$nextTick(() => {
      const navContainer = document.querySelector('.your-nav-wrapper');
      if (navContainer) {
        navContainer.style.overflow = 'auto';
      }
    });
  }
  

  或者干脆用CSS类替代内联样式，减少动态注入的时机问题。

• 强制Safari触发组件重绘
  Vuetify 2部分组件在Safari下存在重绘异常，尤其是带flex布局的导航组件。给导航容器加个简单的CSS hack强制重绘：

  .your-nav-wrapper {
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
  }
  

  你提到窗口拉至极宽时按钮会显示，说明窗口resize触发了正确的重排，这个hack就是模拟类似的重绘触发机制。

• 排查与正常模板的差异点
  既然另一套同配置模板正常，重点对比这几点：

  • 导航组件的嵌套层级：是否多了不必要的容器导致溢出计算出错
  • Vuetify配置：比如自定义的breakpoint参数、图标库的加载方式
  • 依赖版本：Vue-router、其他插件的版本是否有差异，某个依赖可能在Safari下引发了样式冲突

• 修正初始布局的溢出计算
  Safari初始加载时对容器尺寸的计算可能有偏差，导致按钮被溢出隐藏。可以先给导航容器设置初始可见的溢出属性，加载完成后再切换：

  .your-nav-wrapper {
    overflow: visible !important;
  }
  

  然后在mounted钩子中再把overflow设为auto，确保DOM尺寸计算准确后再限制溢出。

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