水波纹效果必须用::after或::before伪元素实现；需通过getBoundingClientRect计算相对坐标并设置left/top，加pointer-events:none和will-change:transform以兼容Safari。
水波纹效果必须用 ::after 或 ::before 伪元素实现
纯 CSS 水波纹本质是「在点击位置画一个圆形渐变，再缩放+透明度过渡」，但浏览器不支持直接用 JS 动态创建带定位的伪元素——所以必须提前写好伪元素，并靠 JS 注入坐标和触发动画。常见错误是试图只用 background 或 box-shadow 模拟，结果圆心偏移、多点点击错乱、或 Safari 下完全不触发。
- 伪元素必须设
position: absolute，父容器加position: relative - 伪元素初始状态：
width: 0; height: 0; opacity: 0;，且border-radius: 50% - 动画关键帧里只改
transform: scale()和opacity，避免触发布局重排 - 每次点击前要清空上一次的
left/top，否则新水波从旧位置开始扩散
getBoundingClientRect() 是算点击坐标的唯一靠谱方式
用 event.clientX/event.clientY 直接赋值给伪元素的 left/top，在滚动页面、缩放视口、或按钮有 transform 的情况下必偏。真实场景中，90% 的水波偏移都源于这个。
- 先调
button.getBoundingClientRect()拿到按钮左上角相对于视口的坐标 - 再用
event.clientX - rect.left算出点击点相对于按钮内部的 X 偏移 - Y 同理，用
event.clientY - rect.top - 最后把这两个值设为伪元素的
left和top（注意单位是 px，要加"px"）
多个按钮共用同一套水波逻辑时，pointer-events: none 必须加在伪元素上
否则伪元素会挡住后续点击，尤其在快速连点或按钮密集排列时，第二下根本点不中。这不是 bug，是层叠上下文导致的默认行为。
- 伪元素样式里一定要写
pointer-events: none; - 别依赖
z-index排序来“绕过”这个问题——它不解决遮挡，只改变绘制顺序 - 如果按钮本身有
disabled状态，记得在 JS 中跳过水波创建逻辑，否则 disabled 按钮也会触发伪元素
Safari 15.4+ 对 transform: scale() 动画有渲染延迟
不是卡顿，是首帧常空白 1–2 帧，看起来像水波“闪一下再出来”。Chrome/Firefox 没这问题。根源是 Safari 对未显式声明 will-change: transform 的缩放动画优化不足。
立即学习“前端免费学习笔记（深入）”；
- 给伪元素加
will-change: transform;（仅限动画期间，用完可移除） - 或者退一步：用
width/height过渡代替scale()，虽然性能略差但兼容性稳 - 别用
transition: all，必须精确写transition: transform 0.4s, opacity 0.4s
水波纹看着简单，真正压住所有边界情况的关键，其实是坐标计算那一行要不要减 rect.left，以及 Safari 下那行 will-change 加没加。漏掉任意一个，用户一滚动、一缩放、一连点，效果就断了。
