购物车按钮波纹失效主因是上下文缺失：未设position: relative导致伪元素定位偏移、overflow: hidden裁剪动画、移动端未监听touchstart、非button元素缺少tabindex或role、未禁用iOS高亮层。
纯 CSS 的 :active 波纹只能从按钮中心出发，无法响应真实点击位置；要实现“点哪炸哪”的购物车按钮波纹，必须用 JS 计算坐标 + CSS 自定义属性驱动动画。
为什么购物车按钮加了 :active::after 却没波纹？
常见原因不是代码写错，而是上下文缺失：
-
button没设position: relative→::after会相对于body定位，波纹飞出按钮外 - 父容器有
overflow: hidden→ 波纹放大时被裁剪，只看到一小截圆边 - 移动端未处理
touchstart→:active在 Safari 或安卓 WebView 中根本不会触发 - 按钮是
<div class="add-to-cart"> 而非语义化 <code><button></button>→ 非表单元素默认不支持:active，需加tabindex="0"或role="button" - 漏了
-webkit-tap-highlight-color: transparent→ iOS 点击高亮层盖住了波纹 - 必须先取按钮的视口矩形：
const rect = e.target.getBoundingClientRect()，不能直接用e.offsetX（IE 不支持，且在 transform 容器里失真） - 正确计算方式：
const x = e.clientX - rect.left、const y = e.clientY - rect.top；移动端要用e.touches[0].clientX - 别用
Math.round()四舍五入 —— 小数坐标更平滑，强制取整反而导致波纹抖动 - 如果按钮内嵌在
transform: scale(0.9)的容器中，getBoundingClientRect()返回值已自动适配缩放，无需额外除以 scale 值 - 按钮上加
style="--x: 0px; --y: 0px;"，初始值设为0px防止首次点击继承旧值 -
::after的left和top改为var(--x)和var(--y)，再配合transform: translate(-50%, -50%)居中圆心 - 动画用
transform: scale(0)→scale(3)，别改width/height，否则触发布局重排，低端安卓机明显掉帧 - 记得加
pointer-events: none到::after，否则新生成的波纹层会拦截后续点击 - 移动端监听
pointerdown（带{ passive: false }），一个事件覆盖 touch/mouse，避免双触发 - 列表用
v-for或ngFor渲染时，每个按钮必须单独声明position: relative，不能靠父容器统一设置 —— 否则滚动后定位基准错乱 - 按钮文字是 “加入购物车” 但图标在右，用户习惯点图标区域，此时波纹中心应靠近图标而非文字中心，需按热区逻辑微调
--x偏移 - 若按钮有
disabled状态，务必在 JS 中判断e.target.disabled，跳过波纹逻辑，否则 disabled 按钮也会触发动画 - 动画结束时间必须和 CSS
animation-duration严格一致，例如设了400ms，JS 清除变量就得用setTimeout(() => { btn.style.removeProperty('--x'); }, 400)
getBoundingClientRect() 算坐标时最容易错哪几处？
所有定位偏移问题，几乎都源于没把屏幕坐标转成相对坐标。关键不是“怎么算”，而是“算给谁看”：
JS + CSS 变量方案比动态插入 DOM 更轻量
不用每次新建 <span class="ripple"></span>，只需注入两个 CSS 变量，让伪元素读取即可：
立即学习“前端免费学习笔记（深入）”；
购物车场景下容易被忽略的细节
购物车按钮常处于列表项中，滚动、复用、异步渲染多，这些地方最易翻车：
