H5页面在iOS Safari上fixed定位失效怎么办？

这问题我遇到过无数次，iOS Safari对fixed定位确实有坑，但不是不支持，而是触发条件比较奇葩。

你这个情况大概率是页面结构或者滚动容器的问题。iOS下fixed定位有几个经典失效场景：

第一，检查下body或者html是不是设置了overflow-x:hidden，这个属性在iOS下会创建一个新的滚动容器，fixed就相对于它而不是viewport了，直接跟着滚。

第二，看看有没有哪个父级元素设置了transform、will-change或者filter，这些属性会改变包含块，fixed就不再相对于视口定位。

第三，如果你页面里有-webkit-overflow-scrolling:touch，这玩意儿也会让fixed乱套。

最稳妥的解决方案是改结构，把fixed元素提到body直接子级，别嵌套在任何容器里：

  
页面内容


  
底部导航

然后页面内容单独包一层，给它设置滚动：

html, body {

  height: 100%;

  overflow: hidden;

}

.page-content {

  height: 100%;

  overflow-y: auto;

  -webkit-overflow-scrolling: touch;

}

.bottom-nav {

  position: fixed;

  bottom: 0;

  left: 0;

  width: 100%;

  height: 50px;

  background: #fff;

  z-index: 999;

}

这样底部导航固定在body上，滚动发生在内容区里，两边互不干扰。

还有个取巧方案是用sticky定位，但兼容性要考虑下：

.bottom-nav {

  position: sticky;

  bottom: 0;

  /* 其他属性保持不变 */

}

不过sticky在某些iOS版本也有小毛病，建议还是用第一种方案，结构清晰不容易翻车。浏览器兼容这事儿，改结构往往比硬刚CSS靠谱。