React自定义按钮在Safari移动端文本切换延迟问题排查

问题场景 #

我基于React实现了一个自定义Button组件，通过transform: scale()实现hover缩放效果，该组件被复用为两个实例：

• 仅包含动态文本，无onClick属性：

<Button className={`${classes.btn} ${classes["main-btn"]}`}>
  {isLoginMode
    ? "Login"
    : isRegisterMode
    ? "Register"
    : "Reset Password"}
</Button>

• 带有onClick属性，用于切换登录/注册状态：

<Button
  properties={{
    onClick: () => {
      setAuthMode(
        isLoginMode ? AuthModes.register : AuthModes.login
      );
    },
  }}
  className={`${classes.btn} ${classes["alt-btn"]}`}
>
  {isLoginMode ? "Register" : "Login"}
</Button>

桌面端表现正常，但在Safari移动端，带onClick的按钮在状态切换时文本更新存在明显延迟，移除transition属性后恢复正常。

相关CSS代码：

• 父组件内的.btn样式：

.btn {
  width: 100%;
  padding: 0.7rem 0.9rem;
  transition: transform 1s ease;
}

• 自定义Button组件内的.btn样式：

.btn {
  outline: none;
  border: none;
  padding: 0.8rem 1.2rem;
  background-color: var(--secondary-color);
  border-radius: var(--radius-low);
  color: white;
  font-weight: bold;
}

.btn:hover {
  transform: scale(1.02);
}

问题原因 #

Safari移动端对同时带有transition过渡动画和onClick触摸事件的元素存在渲染优先级冲突：当元素触发状态切换时，Safari会优先处理过渡动画，延迟文本内容的渲染更新，直到过渡周期结束。

解决方案 #

提供三种可行方案，按需选择：

1. 仅在hover状态应用过渡 #

将过渡属性从通用.btn类移至:hover伪类，确保过渡仅在触发缩放时生效，不影响状态切换时的文本渲染：

/* 父组件内修改.btn样式 */
.btn {
  width: 100%;
  padding: 0.7rem 0.9rem;
  /* 移除全局transition */
}

.btn:hover {
  transition: transform 1s ease; /* 仅hover时启用过渡 */
}

2. 添加触摸事件优化属性 #

给按钮添加touch-action: manipulation，告知Safari跳过触摸延迟优化，提升文本渲染优先级：

.btn {
  width: 100%;
  padding: 0.7rem 0.9rem;
  transition: transform 1s ease;
  touch-action: manipulation; /* 添加该属性 */
}

3. 拆分过渡效果的应用范围 #

为不同用途的按钮设置差异化类名，仅给无onClick的按钮保留过渡效果：

/* 父组件内定义 */
.btn {
  width: 100%;
  padding: 0.7rem 0.9rem;
}

.btn-hover-transition {
  transition: transform 1s ease;
}

使用时分别绑定类名：

<!-- 无onClick的按钮添加过渡类 -->
<Button className={`${classes.btn} ${classes["btn-hover-transition"]} ${classes["main-btn"]}`}>
  {/* 动态文本内容 */}
</Button>

<!-- 带onClick的按钮不添加过渡类 -->
<Button
  properties={{ onClick: /* 状态切换逻辑 */ }}
  className={`${classes.btn} ${classes["alt-btn"]}`}
>
  {/* 动态文本内容 */}
</Button>

效果验证 #

修改后在Safari移动端测试按钮状态切换，文本可即时更新，同时hover缩放效果正常保留。

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