根本原因是 transform: scale()默认以左上角为原点缩放，而绝对定位标记锚点固定，放大后宽高增加导致视觉右下偏移；解决需设 transform-origin: center、确保标记有明确宽高、svg 内层应用 transform。
hover 放大标记时元素位置偏移或抖动
根本原因是 transform: scale() 默认以元素左上角为原点缩放，而地图标记通常靠 position: absolute 定位在经纬度对应像素点。放大后宽高变大，但定位锚点没变，视觉上就像“往右下跳”。
解决办法是强制缩放中心对齐到标记中心：
- 给标记容器加
transform-origin: center - 确保标记本身有明确宽高（比如用
width/height或aspect-ratio），避免依赖内容撑开导致中心漂移 - 如果标记是 SVG 图标，别只缩放外层容器，优先对
<svg></svg>或<g></g>应用transform，否则viewBox和缩放会冲突
阴影扩散动画卡顿或不平滑
box-shadow 的 blur-radius 和 spread-radius 都属于 CSS 中较重的绘制属性，直接在 :hover 里写多组值容易触发重排或 GPU 降级。
实操建议：
立即学习 “ 前端免费学习笔记（深入）”；
- 只过渡
box-shadow整体，不要拆成transition: box-shadow 0.3s, transform 0.3s—— 浏览器会合并为单次合成 - 加
will-change: transform, box-shadow提前提示渲染层提升（但别滥用，仅对高频交互元素） - 阴影扩散幅度别过大，比如从
0 0 0 0 #000到0 8px 24px -4px rgba(0,0,0,0.3)就够用；超过blur-radius: 32px在低端设备上明显掉帧
地图容器内 hover 效果失效或穿透
Leaflet / Mapbox 等库默认把标记 DOM 插入到 map-pane 或 overlayPane，这些容器常带 pointer-events: none（为了不阻断地图拖拽），导致子元素 hover 失效。
检查并修正：
- 找到地图标记的父容器（如
.leaflet-marker-icon或自定义marker-pane），确认它没被设pointer-events: none - 如果必须保留父容器禁用事件，就在标记元素上显式加
pointer-events: auto - 避免用
z-index覆盖地图控件层——标记应位于overlayPane（z-index ≈ 400），而不是强行提到popupPane（z-index ≈ 600）之上，否则可能遮挡缩放按钮
移动端 hover 无响应或延迟明显
手机浏览器没有真正意义上的 hover，多数靠模拟：第一次点击触发 :hover，第二次才触发 click，造成“点两下才放大”。
更可靠的做法是放弃纯 CSS hover：
- 监听
mouseenter/touchstart，统一触发 class 切换（如.marker-active） - 用
@media (hover: hover) and (pointer: fine)区分鼠标设备，保留 hover 动画；其他设备走 JS 控制的 class 过渡 - 别依赖
transition-delay做悬停防误触——移动端手指停留本就不稳定，延迟反而让反馈更迟钝
实际做下来，最难调的是缩放中心和地图坐标系的对齐。很多标记看着居中，其实 SVG 的 viewBox 偏了几个像素，或者用了 background-position 拼图，一放大就露馅。得打开开发者工具，把 transform-origin 设成像素值反复试。
