按钮贴右下角“露一半”或“卡边不动”的根本原因是未正确处理初始隐藏态与滑出锚点关系：必须用right: -60px（精确等于按钮宽度）而非transform移出，否则ios safari渲染错乱、hit area失效且被overflow: hidden截断。
为什么按钮贴右下角后还“露一半”或“卡在边缘不动”
根本不是 right 或 bottom 值设小了，而是没处理好「初始隐藏态」和「滑出锚点」的关系。常见错误是直接用 transform: translateX(100%) 把按钮推到视口外，结果 iOS Safari 渲染层错乱，或者被父容器的 overflow: hidden 截断。
- 初始状态必须用
right: -60px（宽度+一点余量），而不是靠transform移动——后者会破坏 hit area 且无法被屏幕阅读器感知 - 如果按钮容器有
transform、filter或will-change，它会被关进局部层叠上下文，z-index再高也压不住外部弹窗 - 别把按钮塞进某个
div#app里再 fixed；直接挂到document.body最稳，绕过所有框架布局干扰
滑出动画怎么写才不卡、不闪、不跳
用 CSS transition 比 JS 动画更轻量，但参数选错就容易抖。iOS Safari 对 transform 的重绘优化很敏感，尤其在键盘唤起或地址栏收起时。
- 只过渡
right和opacity，别碰width、height或padding—— 否则点击热区会突变 - 动画时间控制在
0.25s，用cubic-bezier(0.33, 0.66, 0.5, 1)替代ease-in-out，避免开头太慢、结尾拖沓 - 必须加
transform: translateZ(0)或will-change: right，否则 iOS 上 fixed 元素滑出时可能闪烁或丢帧 - 移动端要补
touch-action: manipulation，不然第一次点击有 300ms 延迟，用户会觉得“点了没反应”
怎么让按钮在滚动时自动贴边/滑出，又不误触
监听 scroll 是最常用做法，但直接绑在 window 上容易频繁触发，尤其在快速滚动时。更稳的方式是节流 + 状态判断。
- 用
requestIdleCallback或简单时间戳节流（间隔 ≥ 60ms），避免滚动中反复重排 - 只在页面滚动距离 > 200px 时才滑出，
document.documentElement.scrollTop比window.scrollY更兼容 IE/旧安卓 - 鼠标悬停时不自动滑出——hover 是视觉反馈，click 才触发动作；否则手一划过去就弹面板，体验极差
- 展开客服面板后，给
body加overflow: hidden，但必须同步加position: fixed; top: 0;，否则页面会突然上跳
微信/企微 SDK 接入后按钮点不动怎么办
不是按钮没绑定事件，而是 SDK 初始化逻辑阻塞了 click，或唤起 webview 时覆盖了原生 DOM 层级。
- 确保 SDK
init完成后再绑定按钮 click，别在DOMContentLoaded就急着加事件 - 微信内置浏览器里，如果用了自定义 webview 容器，
position: fixed可能被禁用；fallback 方案：监听scroll手动更新style.top和style.right - 企业微信 JS-SDK 调用
openCustomerChat前，检查agentId和externalUserId是否已就绪，否则静默失败，看起来就像点无效 - 别用
window.open()跳转客服页——微信环境会拦截，必须走官方 JS-SDK 或location.href协议跳转
getBoundingClientRect() 和 offsetParent，否则滑出位置永远对不准。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
