position sticky属性在安卓/Windows正常仅iPhone失效问题咨询

按优先级执行以下排查修复步骤： #

• 首先删除CSS中多余的transform: translate3d(0,0,0)属性
  iOS Safari中，transform属性会改变元素的定位上下文，直接导致sticky定位失效，这是绝大多数iOS端sticky异常的核心诱因。
• 检查sticky元素所有祖先节点的overflow属性
  只要任意一级父元素设置了overflow: hidden/auto/scroll且属性值不为visible，sticky定位就会失效。如果使用了Ionic框架，默认ion-content组件的overflow属性为scroll，需要把sticky按钮移到ion-content节点外部，或者给ion-content设置如下CSS变量：

ion-content {
  --overflow: visible;
}

• 确认类名绑定正确
  你定义的sticky样式类为.button-sticky，但实际绑定在ion-button上的类为vaga-interna-botao-sticky，先确认是否存在类名绑定错误导致样式未生效的问题。
• 确认sticky元素的父容器高度足够
  sticky定位的生效前提是父容器高度大于sticky元素自身高度，滚动时sticky元素会在父容器的可视范围内停留。如果.container容器高度刚好等于内部内容总高度，没有预留滚动空间，sticky元素就会一直固定在bottom设置的位置，看起来像失效。
• 清理多余的私有前缀
  目前除了-webkit-sticky用于适配旧版iOS之外，-moz-sticky/-o-sticky/-ms-sticky都没有被任何主流浏览器支持，多余前缀可能导致旧版iOS样式解析异常，仅保留以下前缀即可：

.button-sticky {
  position: -webkit-sticky;
  position: sticky;
  /* 其余原有属性保留 */
}

• 修复HTML语法错误
  提供的HTML中<div class="wrapper>的类名引号没有闭合，可能导致浏览器DOM结构解析异常，修正为<div class="wrapper">。

内容的提问来源于stack exchange，提问作者Rodinei Cirineu