移动端无波纹需优先用touchstart替代click并设置touch-action: manipulation；伪元素波纹需按钮设position: relative、伪元素用transform定位+will-change: transform，且坐标须用touches[0]与getboundingclientrect()精确计算。
移动端点击没波纹？先检查 touchstart 替代 click 和 touch-action
纯 click 在 iOS Safari 和部分安卓 WebView 里有 300ms 延迟，且 :active 状态可能压根不触发。必须改用 touchstart 事件监听，并给按钮加 touch-action: manipulation 显式声明只做点击意图——否则 Safari 会等 300ms 判断是否双指缩放。
常见错误是只写 cursor: pointer，这在桌面端有效，但移动端完全无效；touch-action 才是关键开关。另外，如果按钮是 div，务必加 tabindex="0"，否则无法获得焦点，:active 仍不会激活。
-
touch-action: manipulation必须写在按钮本身，不能只写在父容器上 - 监听
touchstart后要立刻event.preventDefault()（仅当不需要滚动时），避免误触发页面滚动 - 不要依赖
:active驱动整个动画——它持续时间太短，只适合做按压反馈，水波纹必须靠 JS + 伪元素或临时节点
为什么伪元素波纹总从左上角炸开？position: relative 和坐标计算漏了哪步
伪元素 ::after 的 left/top 是相对于最近的 position: relative 祖先定位的。如果按钮没设 position: relative，它就会以 body 为基准，导致圆心严重偏移。
JS 计算坐标时，不能直接用 event.clientX，必须减去按钮的 getBoundingClientRect() 偏移：
const rect = button.getBoundingClientRect(); const x = event.clientX - rect.left; const y = event.clientY - rect.top;
更关键的是：移动端 touchstart 的坐标在 event.touches[0] 里，不是 event 直接属性。漏掉这层取值，坐标就全错。
- 每次点击前清空上一次的
style.setProperty('--x', '0px')，否则新波纹会继承旧值 - 用
Math.max(0, Math.min(x, width - diameter))约束圆心不越界，否则波纹会从按钮外侧“挤”进来 - 按钮必须设
overflow: hidden，否则放大后的波纹会撑出边界
Safari 波纹卡顿/闪烁？will-change: transform 和 translate 定位是硬性要求
iOS 15 及更早版本的 Safari 对 ::after + transform: scale() 有重绘 bug，尤其当同时设置 top/left 和 transform 时。绕过方式很具体：必须统一用 transform: translate(x, y) scale(s) 定位+缩放，且给伪元素加 will-change: transform 强制硬件加速。
别信“加 -webkit- 前缀就行”，实测无效。真正起作用的是这两条组合：
-
will-change: transform写在伪元素样式里，不是按钮上 - 删掉所有
top/left，只保留transform: translate(var(--x), var(--y)) scale(0) -
transform-origin: center center必须显式声明，否则缩放中心默认是左上角
动画结束残留波纹？别用 setTimeout 清理 DOM 或重置状态
用 setTimeout 等动画时长再 remove() 波纹节点，极易因设备性能差异、CSS 动画被暂停（如切后台）导致节点残留。正确做法是监听 animationend 或 transitionend 事件：
ripple.addEventListener('animationend', () => ripple.remove());
如果是伪元素方案，不能删节点，得重置动画状态：button.style.animation = 'none'; button.offsetHeight; button.style.animation = ''; 这三行缺一不可——第二行强制重排，让浏览器重置动画计时器。
- 多个快速点击时，每次都要先
button.style.animation = 'none'，否则新动画会排队叠加 - 伪元素方案中，
animation-fill-mode: forwards必须设，否则动画结束后scale回退到 0，波纹瞬间消失，视觉断层 - 别在伪元素上写
transition，要用@keyframes+animation，因为波纹需要三段变化（出现→扩散→淡出）
实际最易被忽略的点是：Safari 下 transform: scale() 和 top/left 混用会直接失效，不是兼容性问题，是渲染引擎 bug；必须彻底放弃 top/left，全部走 transform。这点在开发机上可能不明显，但真机测试时会突然崩。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
