Vue+Tailwind CSS在macOS/iOS上过渡动画卡顿问题求助

问题 #

在iPhone或MacBook上测试Vue垂直导航菜单组件时，切换类名触发的过渡动画出现跨浏览器差异卡顿：

• iOS Safari：过渡缓慢，可见逐帧跳动
• iOS Chrome：直接跳转到目标位置，完全无过渡
• macOS Chrome/Safari：过渡存在轻微延迟

该组件为移动端默认隐藏在屏幕外、点击按钮后移入视野的垂直导航。

组件代码 #

<template>
  <div class="w-0 md:w-1/5 absolute sm:relative sm:block h-full transform top-0 w-64 select-none
      overflow-auto ease-in-out transition-all duration-300 z-30 -translate-x-[300px] md:translate-x-0 overflow-y-hidden" :class="{'translate-x-0': open}" v-click-outside="toggleMobileNav">
    <aside class="h-full" aria-label="Sidebar">
      <div class="py-4 px-3 bg-white dark:bg-primary-dark h-full overflow-y-auto shadow-lg" >
<!-- ... 剩余代码省略 -->
      </div>
    </aside>
  </div>
</template>

Tailwind CSS配置 #

module.exports = {
    darkMode: "class",
    theme: {
        extend: {
            zIndex: {
                '-10': '-10',
            },
            colors: {
                'primary': '#1be396',
                'primary-dark': '#181818',
                'primary-dark-lighter': '#232325',
                'danger': '#e11d48',
                'info': '#3083DC',
                'warning': '#FCA311',
            }
        },
    },
    plugins: [
        require('tailwind-scrollbar'),
        require('autoprefixer')
    ],
    variants: {
        scrollbar: ['rounded']
    },
    content: [
        `components/**/*.{vue,js}`,
        `layouts/**/*.vue`,
        `pages/**/*.vue`,
        `composables/**/*.{js,ts}`,
        `plugins/**/*.{js,ts}`,
        `App.{js,ts,vue}`,
        `app.{js,ts,vue}`
    ]
}

解决方案 #

1. 修复错误的过渡目标类 #

原代码中:class绑定的'-translate-x-0'是无效的，应该改为translate-x-0，确保从隐藏状态的-translate-x-[300px]正确过渡到可见状态的translate-x-0。

2. 替换transition-all为针对性过渡 #

transition-all会触发所有可过渡属性的动画，包括宽高、overflow等性能开销极大的属性，移动端浏览器难以高效处理。改成仅过渡transform：
将原类中的transition-all替换为transition-transform，保留ease-in-out duration-300。

3. 清理冲突的宽度类 #

原组件同时存在w-0和w-64，移动端会导致宽度计算混乱，干扰过渡动画。调整类顺序，移除移动端无效的w-0：

<!-- 修改后的外层div类 -->
<div class="absolute sm:relative sm:block h-full transform top-0 w-64 select-none
    ease-in-out transition-transform duration-300 z-30 -translate-x-[300px] md:translate-x-0 overflow-y-hidden" :class="{'translate-x-0': open}" v-click-outside="toggleMobileNav">

4. 添加硬件加速提示 #

给过渡元素添加will-change: transform，告诉浏览器提前准备硬件加速，减少卡顿：

/* 可添加到组件style标签或全局样式 */
.sidebar-transition {
  will-change: transform;
}

然后给外层div添加这个自定义类。

5. 移除冲突的overflow属性 #

原组件外层div同时存在overflow-auto和overflow-y-hidden，属性冲突会触发不必要的重排重绘。保留overflow-y-hidden在过渡阶段，内部内容的滚动依赖内层已有的overflow-y-auto即可。

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