transform: scale() 不改变布局盒尺寸和事件坐标系，点击事件仍基于原始宽高计算，缩放后视觉区域与命中检测区域不一致，导致点击偏移。
因为 transform: scale() 只改视觉渲染，不改布局盒尺寸和事件坐标系。
浏览器事件坐标始终基于原始 layout box 计算
你点下去那一刻，clientX/clientY 的值是按元素没缩放前的宽高和位置算的。哪怕它视觉上被缩成一半，浏览器仍把它当成“100%尺寸”来分发点击事件。比如一个原始 width: 200px 的按钮加了 transform: scale(0.5)，视觉宽度变成 100px，但点击坐标 (150, 50) 依然落在原始 200px 区域内——实际已超出缩放后可视范围。
缩放不改变 hit-testing 区域
hit-testing（命中检测）用的是元素的几何边界，不是渲染像素。这意味着：
- 缩放后的空白区域无法响应点击
- 你“看着点中了”，其实坐标落在缩放前的 padding 或 margin 里
- 子元素用了
position: absolute时，它的定位参考点也还是缩放前的父容器边界
transform-origin 会让换算更复杂
默认 transform-origin: 50% 50% 意味着缩放中心在元素正中，坐标换算必须先平移回原点、再缩放、再平移回去。如果硬写死缩放因子又忽略 origin 偏移，换算结果直接偏一个半径的距离。
更麻烦的是：这个 origin 可能来自 CSS 变量、JS 动态设置，或被父级 transform 影响——getComputedStyle(el).transform 解析出的 matrix 矩阵里，a/d 值要取绝对值再开方，才得到真实缩放比；而矩阵本身还可能叠加 rotate 或 translate。
移动端 touch 事件额外失准
iOS Safari 和部分安卓 WebView 中，touchstart 坐标可能被浏览器手势系统劫持，尤其当容器设置了 overflow: hidden 或内部有 input 聚焦时。这时仅靠 JS 换算坐标不够，还必须：
- 显式加
touch-action: none或touch-action: manipulation - 确保
pointer-events: auto没被父级pointer-events: none覆盖 - 避免在缩放容器内监听
touchstart，改用外层代理
真正难的不是写几行换算代码，而是缩放因子来源不可控、transform-origin 多层嵌套、touch 与 mouse 事件路径不一致——漏掉任意一个，偏移就还在那儿。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
