需用 env(safe-area-inset-bottom) 动态适配异形屏底部安全区，配合 viewport-fit=cover 设置，并将按钮挂载至 body 避免 transform 等创建新包含块导致 fixed 失效。
移动端 fixed 悬浮按钮在异形屏下点击错位怎么办
直接写 bottom: 20px 在 iPhone X 及后续全面屏机型上，按钮大概率卡在刘海和小黑条之间，甚至被安全区裁掉一半——这不是样式没生效，是定位基准没对齐系统定义的「可视安全区域」。
必须用 env(safe-area-inset-bottom) 动态补足底部留白，且需配合 viewport 设置才生效：
-
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">是前提，缺了它env()返回 0 - 写法要分层 fallback：
bottom: 24px; bottom: calc(24px + env(safe-area-inset-bottom));，老设备忽略第二行，新设备覆盖 - 别用
inset简写（如inset: 0 0 env(safe-area-inset-bottom) 0），iOS Safari 15.4 之前不支持 - 真机测试时打开「放大字体」或「显示缩放」辅助功能，部分偏移只在此场景暴露
如何让悬浮按钮在键盘弹出时不被顶出屏幕
Android Chrome 80+ 和多数国产 WebView 会错误地把 position: fixed 元素随页面一起上推，导致按钮消失——这不是 bug，是它们对 visualViewport 的实现偏差。
监听 focusin 和 blur 比监听 resize 更可靠：
- 给所有可聚焦输入框（
<input>、<textarea></textarea>）加focusin事件，在触发时临时改按钮bottom值为calc(24px + env(safe-area-inset-bottom)) -
blur后立刻恢复原始值，避免残留偏移 - 若按钮本身含
<input>（比如搜索浮窗），需额外判断e.target是否为自身子元素，防止自触发循环 - 慎用
visualViewportAPI：iOS Safari 不支持，部分安卓 WebView 返回值滞后
为什么把按钮挂到
根本原因是父容器的 transform、filter 或 perspective 会创建新的包含块（containing block），让 position: fixed 失效——它不再锚定视口，而是锚定那个带 transform: translateZ(0) 的滚动容器。
验证方法很简单：DevTools 里选中按钮，看 computed 样式中的 Containing block 是不是意外变成了某个 .scroll-container。
- 最轻量修复：把按钮 DOM 节点剪切出来，直接 append 到
document.body - 如果框架限制（如 React Portal 不够用），可用
getBoundingClientRect()+position: absolute模拟 fixed 行为，但需监听scroll和resize - 禁用父级的
overflow: hidden：它虽不直接影响定位，但常和transform同时出现，掩盖真正问题
异形屏下阴影被裁切、点击热区不准的根源
右下角悬浮按钮的阴影常被「砍掉」，不是 box-shadow 写错了，是最近的非 static 祖先设置了 overflow: hidden 或 overflow: clip ——阴影属于该祖先的盒模型边界内，超出即裁。
更隐蔽的问题是：用 mask-image 或 clip-path 做异形图标时，点击热区仍按原始矩形计算。用户点在「心形尖端」可能落空，点在「空白凹陷处」反而触发。
- 阴影裁切：检查按钮向上逐级的父元素，删掉
overflow: hidden；若必须保留，改用filter: drop-shadow()，它不参与盒模型裁切 - 异形点击不准：优先用
clip-path: path()（iOS 16.4+/Chrome 100+ 支持），它同步更新热区；mask-image只适合静态装饰，别用于交互元素 - 深色模式下阴影发灰？别硬套桌面 rgba(0,0,0,0.15)，浅色背景用
rgba(0,0,0,0.12)，深色背景换hsla(0,0%,100%,0.1)
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
