纯CSS无法实现“点击哪就从哪炸开”的波纹效果，必须用getBoundingClientRect()将clientX/clientY转换为相对按钮的坐标，否则伪元素定位基准错误；按钮需设position:relative，::after须content、border-radius:50%、pointer-events:none，且Safari需will-change:transform+translate避bug。
纯 CSS 无法实现“点击哪就从哪炸开”的波纹效果——getBoundingClientRect() 是绕不开的 JS 步骤，否则圆心必然偏移。
为什么必须用 getBoundingClientRect() 算坐标
浏览器里 clientX/clientY 是相对于视口的，而伪元素的 left/top 是相对于最近的 position: relative 父容器。不转换，波纹就会飘到页面任意角落。
- 漏掉
const rect = button.getBoundingClientRect()，所有后续坐标都错 - 正确写法是：
const x = e.clientX - rect.left，不是e.offsetX（IE 不支持，嵌套 transform 下失真） - 移动端必须用
e.touches[0].clientX，e.clientX在 touch 事件里是 0
::after 伪元素必须满足的四件事
少一条，波纹就看不见、不对齐或卡顿。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 按钮本身得有
position: relative，否则伪元素定位基准错乱 -
::after必须带content: ""，否则不渲染 - 必须设
border-radius: 50%和pointer-events: none，否则是方块、还拦点击 - 动画用
transform: scale()，别碰width/height——后者触发重排，一卡就崩
Safari 渲染异常怎么兜住
iOS 15 及更早版本对 transform: scale() + 伪元素组合有重绘 bug，不手动干预，真机上大概率闪、卡、不动。
立即学习“前端免费学习笔记（深入）”；
- 给伪元素加
will-change: transform，强制 GPU 加速 - 圆心定位统一用
transform: translate(x, y)，别混用top/left - 按钮若有
border-radius，父级必须加overflow: hidden，否则 Safari 裁切动画轨迹 - 每次点击前清旧值：
button.style.setProperty('--x', '0px')，否则新波纹从上一次位置起始
真正卡住人的永远是 Safari 的渲染逻辑和连点时的动画状态管理——这两个点不手动兜底，效果在真机上基本不可用。
