sticky-bottom在iOS Safari中不生效的真正原因是WebKit引擎限制：bottom方向支持极差，父容器含transform/filter/overflow-y:hidden时直接退化为static；必须按position: -webkit-sticky; position: sticky;顺序声明，且overflow-y:hidden是最大陷阱，flex父容器需设align-items:flex-start，内容不足一屏时不会自动沉底。
sticky-bottom在iOS Safari中不生效的真正原因
不是“不兼容”，而是Safari对position: sticky的bottom方向支持极差——哪怕加了-webkit-sticky，只要父容器有transform、filter或overflow-y: hidden，它就直接退化为static。这不是Bug，是WebKit引擎的既定限制。
- 必须写成
position: -webkit-sticky; position: sticky;，顺序不能反，否则Safari忽略 -
overflow-y: hidden是最大陷阱：哪怕只在<main>或<div class="container">上加，sticky-bottom就彻底失效 - 如果父容器是
display: flex，得显式设align-items: flex-start，否则Safari不触发sticky上下文 - 内容高度不足一屏时，
sticky-bottom不会自动沉底——它只在滚动时吸附，不是fixed语义
data-bs-*属性在Safari 11及更早版本中静默失效
Bootstrap 5的data-bs-toggle、data-bs-target等属性，在Safari 11及更早版本里根本不会被JS读取，模态框打不开、下拉菜单点不动、折叠按钮没反应——控制台零报错，纯静默失败。
- 别指望浏览器自动映射
data-toggle→data-bs-toggle，它连warning都不抛 - 检查所有交互元素是否已批量替换，尤其
<button data-bs-toggle="collapse">和<a data-bs-target="#menu"> - CDN引入的是
bootstrap@5.x，但抄的v4文档？90%的功能失灵都卡在这一步 - Safari 12+才被官方列为最低支持版本；Safari 11需自行补
Element.matches和CustomEventpolyfill
CSS变量(--bs-*)在旧Safari中降级但需手动fallback
像color: var(--bs-primary)这种写法，在Safari 11.1之前会被完全忽略，最终渲染成继承色或初始值，按钮可能变透明、文字看不见——这不是崩溃，是“安静地错”。
- 所有自定义CSS中用到
var(--bs-*)的地方，必须前置硬编码值：color: #0d6efd; color: var(--bs-primary); -
data-bs-theme="dark"在旧Safari里无效，但页面不会白屏，只是回退到浅色模式——这是CSS变量机制自带的优雅降级 - 避免在关键样式中单独依赖
--bs-gutter-x等变量，旧版Safari不支持calc(var(--bs-gutter-x) * .5)
Flex/Grid混合布局在Safari 12–13中的塌陷与间距翻倍
旧项目若混用float或inline-block和Bootstrap 5的.row { display: flex }，Safari会表现得比Chrome更严格：浮动子项脱离文档流导致.row高度塌陷，--bs-gutter-x和旧margin-right: -15px叠加造成列间距翻倍。
立即学习“前端免费学习笔记（深入）”；
- 用DevTools检查
.row的computeddisplay：如果是flex，但子元素有float，说明模型打架 - 无法重写HTML时，用
.legacy-grid包裹旧区块，并重置：.legacy-grid [class*="col-"] { float: none; flex: 0 0 auto; } - 禁用gutter注入：
.legacy-grid .row { --bs-gutter-x: 0; }，避免和旧padding/margin冲突 - Bootstrap 5.2+启用
$enable-cssgrid: true后，改用.g-col-*可绕过flex，但需自己编译SCSS，CDN版默认不启用
旧Safari的兼容问题从来不是“加个polyfill就能好”，而是每个失效点背后都有明确的引擎限制或设计取舍。最容易被忽略的，是overflow-y: hidden对sticky的全局压制，以及var(--bs-*)缺少fallback时的视觉静默失效——它们不会报错，但会让用户觉得“功能丢了”。
