必须用 getBoundingClientRect() 计算坐标，因为 e.clientX 是相对于视口的，而伪元素定位需相对于按钮自身；需用 rect.left/rect.top 做偏移换算，并为 CSS 变量显式添加 'px' 单位，配合 transform: translate() 和 will-change: transform 避免重排，且每次点击前须清除旧变量防止动画错乱。
为什么必须用 getBoundingClientRect() 算坐标，而不是直接用 e.clientX？
因为 e.clientX 是相对于视口的坐标，而水波纹伪元素的 left 和 top 是相对于按钮自身的定位上下文。不减去按钮左上角偏移，波纹就会出现在页面任意位置，甚至跑到屏幕外。
正确做法是：先调用 button.getBoundingClientRect() 获取按钮在视口中的矩形信息，再计算相对偏移：
const x = e.clientX - rect.leftconst y = e.clientY - rect.top
这两个值才是你要塞进 CSS 变量的真实点击坐标。漏掉这一步，所有后续变量赋值都失效。
--ripple-x 和 --ripple-y 怎么设才不会被 Safari 忽略？
CSS 变量本身不带单位，但 left / top 属性需要带 px。如果 JS 里写成 button.style.setProperty('--ripple-x', x)（没单位），CSS 中用 left: var(--ripple-x) 就会解析为无效值，Safari 尤其敏感。
立即学习“前端免费学习笔记（深入）”；
务必在 JS 中显式加单位：
button.style.setProperty('--ripple-x', x + 'px')button.style.setProperty('--ripple-y', y + 'px')
别依赖 calc() 在 CSS 里补单位——attr() 不支持运算，calc(var(--ripple-x) * 1px) 也无效。唯一可靠路径就是 JS 输出带单位的字符串。
伪元素怎么用 var(--ripple-x) 定位又不触发重排？
关键不是“能不能用”，而是“怎么用才不卡”。直接写 left: var(--ripple-x); top: var(--ripple-y) 看似合理，但会导致每次变量更新都触发布局重排（reflow），动画一卡一卡的。
更优解是统一走 transform: translate(x, y)：
- 伪元素保持
top: 0; left: 0 - CSS 中写
transform: translate(var(--ripple-x), var(--ripple-y)) scale(0) - 这样只触发合成层更新（compositor），不走 layout → paint → composite 流程
顺便记得加 will-change: transform，尤其在 iOS Safari 上，否则 translate + scale 组合可能压根不硬件加速。
为什么每次点击前必须手动清空旧变量？
因为 CSS 变量是继承+级联的，不是“事件作用域”变量。上次点击设置的 --ripple-x 会一直留在元素上，直到被新值覆盖或显式清除。如果用户快速连点，第二个波纹还没扩散完，第三个点击就覆盖了变量，导致第二个波纹中心突然跳变、缩放错乱，甚至卡死动画。
安全做法是在绑定事件时就预置清理逻辑：
- 点击前先执行
button.style.removeProperty('--ripple-x')和removeProperty('--ripple-y') - 或者更暴力但稳妥：
button.style.cssText += '; --ripple-x: 0px; --ripple-y: 0px;' - 避免用
getComputedStyle(button).getPropertyValue('--ripple-x')判断是否存在——这个 API 在动画进行中可能返回空字符串，不可靠
真正容易被忽略的是：变量残留不是“看起来不对”，而是让 @keyframes 动画中途 reset，造成视觉撕裂。这点在真机连点测试时才会暴露。
