移动端Safari与Chrome中CSS按钮点击动画失效问题求助

问题描述 #

网站内带动画的按钮在移动端Safari和Chrome中存在交互异常：

• 点击按钮时动画完全不触发
• 长按按钮时动画仅执行一半，点击其他区域才会完成收尾
  但该按钮在Opera等浏览器中可正常工作。按钮代码如下：

<style>
.button {
  position: relative;
  background: transparent;
  padding: 0;
  border: none;
  cursor: pointer;
  outline-offset: 4px;
  outline-color: deeppink;
  transition: filter 250ms;
  tap-highlight-color: rgba(0, 0, 0, 0);
  font-family: 'Montserrat', sans-serif;
  display: block;
  margin: 20px auto;
  max-width: 300px;
  min-width: 150px;
  touch-action: manipulation;
}

.button:active .front {
  transform: translateY(0px);
  transition: transform 34ms;
}

.button:active .shadow,
.button:active .edge {
  transform: translateY(2px);
  transition: transform 34ms ease;
}

.button .edge {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  background: linear-gradient(45deg, #FF7E5F, #FEB47B);
  transform: translateY(2px);
  z-index: 0;
}

.button .shadow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.15);
  border-radius: 8px;
  transform: translateY(2px);
  z-index: 1;
}

.button .front {
  display: block;
  position: relative;
  border-radius: 8px;
  background: linear-gradient(45deg, #FF7E5F, #FEB47B);
  padding: 12px 25px;
  color: #000;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-size: 1rem;
  transform: translateY(-2px);
  z-index: 2;
  transition: transform 600ms cubic-bezier(0.3, 0.7, 0.4, 1);
}
</style>
<main class="main-content" id="main-content">
<a type="submit" class="button">
            <span class="shadow"></span>
            <span class="edge"></span>
            <span class="front">Register</span>
</a>
</main>

问题原因 #

1. <a>标签交互识别缺失：无href属性的<a>标签在移动端浏览器中不会被标记为可交互元素，导致:active伪类无法正常触发。
2. 移动端触摸事件限制：Safari等浏览器对:active伪类的触发有严格要求，仅依赖点击事件无法激活状态，需要明确的触摸交互触发。
3. 过渡属性定义不完整：.shadow和.edge初始状态未定义过渡属性，浏览器可能无法及时捕捉状态变化。

修复方案 #

方案1：修正<a>标签属性

给<a>标签添加href="#"或role="button"，让浏览器识别为可交互元素：

<a href="#" type="submit" class="button" onclick="event.preventDefault();">
    <span class="shadow"></span>
    <span class="edge"></span>
    <span class="front">Register</span>
</a>

（添加onclick="event.preventDefault();"可阻止默认跳转行为，若不需要跳转功能则加上）

方案2：补充触摸事件伪类支持

在CSS中添加:touchstart伪类与:active配合，确保触摸开始时触发动画：

.button:active .front,
.button:touchstart .front {
  transform: translateY(0px);
  transition: transform 34ms;
}

.button:active .shadow,
.button:active .edge,
.button:touchstart .shadow,
.button:touchstart .edge {
  transform: translateY(2px);
  transition: transform 34ms ease;
}

方案3：完善过渡属性定义

给.shadow和.edge初始状态添加过渡属性，确保状态切换流畅：

.button .shadow,
.button .edge {
  /* 原有属性 */
  transition: transform 34ms ease;
}

方案4：JavaScript手动控制状态（可选）

若上述方案仍不生效，可通过触摸事件手动控制激活状态：

const button = document.querySelector('.button');
button.addEventListener('touchstart', () => button.classList.add('active'));
button.addEventListener('touchend', () => button.classList.remove('active'));
button.addEventListener('touchcancel', () => button.classList.remove('active'));

同时修改CSS选择器为.button.active替代:active：

.button.active .front {
  transform: translateY(0px);
  transition: transform 34ms;
}

.button.active .shadow,
.button.active .edge {
  transform: translateY(2px);
  transition: transform 34ms ease;
}

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