ios safari 中 sticky-bottom 完全无效是 webkit 主动限制：父容器含 overflow-y: hidden、transform 或 filter 时，sticky 会静默退化为 static；需严格按 position: -webkit-sticky; position: sticky; 顺序声明，并避免上述属性及确保 flex 容器设 align-items: flex-start。
因为 sticky-bottom 在 iOS Safari 中根本就不是“不生效”，而是被 WebKit 引擎主动禁用——只要父容器带 overflow-y: hidden、transform 或 filter，position: sticky（尤其是 bottom 方向）就会直接退化为 static。
sticky-bottom 在 iOS Safari 中为什么完全没反应
这不是 Bug，是 WebKit 的既定限制：Safari 对 position: sticky 的 bottom 支持极弱，哪怕写了 position: -webkit-sticky，只要父级有以下任一条件，sticky 就会静默失效：
-
overflow-y: hidden（哪怕只加在<main></main>或<div class="container"> 上）<li> <code>transform（如transform: translateZ(0)、scale(1)） -
filter（哪怕只是filter: none） - 声明顺序必须是
position: -webkit-sticky; position: sticky;—— 顺序反了 Safari 直接忽略 - 父容器不能有
overflow-y: hidden；如果需要裁剪内容，改用clip-path或包裹一层额外容器来隔离 - 如果父容器是
display: flex，必须显式加align-items: flex-start，否则 Safari 不触发 sticky 上下文
此时浏览器不会报错，控制台也看不到 warning，DOM 里样式照常渲染，但行为就是 static —— 它不会吸附，也不会随滚动移动。
必须写的声明顺序和关键补丁
要让 sticky 在 Safari 里“勉强可用”，得同时满足三个硬性条件：
示例修复写法：
<div class="modal-body" style="display: flex; flex-direction: column; align-items: flex-start;">
<div style="position: -webkit-sticky; position: sticky; bottom: 0; background: white;">
我想沉底
</div>
</div>
sticky-bottom 和模态框的天然冲突点
Bootstrap 模态框本身就有多个容易触发 sticky 失效的结构特征：
-
.modal-dialog默认含transform（用于居中动画），它会直接污染子元素的 sticky 上下文 -
.modal-content常被设overflow-y: auto或hidden，一旦设成hidden，里面所有bottom: 0的 sticky 都归零 - 内容高度不足一屏时，sticky-bottom 不会自动“沉底”——它只在滚动过程中吸附，不是
position: fixed语义
所以别指望在 .modal-body 里直接塞一个 position: sticky; bottom: 0 按钮就能固定到底部；真要固定，老实用 position: absolute; bottom: 0 + modal-footer 或手动监听滚动做降级。
data-bs-* 属性在旧 Safari 里也会静默失败
如果你还依赖 data-bs-toggle="modal" 这类属性来控制模态框本身，注意：Safari 11 及更早版本根本读不到 data-bs-*，模态框打不开、按钮没响应、控制台零报错——纯静默失效。这不是 sticky 的问题，但常和 sticky 一起出现在老旧 iOS 设备现场排查中。
真正麻烦的是：这些限制彼此叠加后，你很难靠 CSS 单独修复；往往得重排 DOM 结构、放弃 sticky、改用 JS 滚动监听或绝对定位兜底。别低估 WebKit 对 bottom 方向 sticky 的敌意——它不是“兼容性差”，是压根不打算支持。
