iPhone端虚拟键盘/原生下拉框唤起时position:sticky粘性定位失效问题

问题本质 #

这是iOS Safari的已知原生特性，并非设备不识别position: fixed/sticky定位：当虚拟键盘唤起、原生下拉选框展开时，Safari会将软键盘占据的区域纳入布局视口的高度计算，而非以用户可见的视觉视口作为定位锚点，因此sticky/fixed元素的定位基准会跟着被拉长的页面整体偏移，表现为跟随内容滚动。你添加-webkit-position: sticky的操作是正确的，但无法解决系统层面的视口计算逻辑问题。

可行解决方案 #

• 改用内部滚动容器
  取消body的全局滚动，将可交互的内容区域封装为独立滚动容器：

  html, body {
    height: 100vh;
    overflow: hidden;
  }
  main.container {
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch; /* 保证iOS滚动流畅度 */
  }
  

  sticky的Header作为main容器的直接子元素即可，此时滚动逻辑仅在容器内部触发，不受Safari修改全局视口的影响。

• 动态修正定位属性
  监听输入框的focus/blur事件，或者监听window.visualViewport的尺寸变化事件：当键盘唤起时，手动将Header的定位改为position: fixed; top: 0; width: 100%;，键盘收起后再恢复为sticky属性，同时注意修正页面滚动偏移，避免内容出现跳动。

• 调整CSS前缀书写顺序
  你当前的CSS前缀书写顺序会导致标准属性覆盖前缀属性，建议调整为：

  .form-header {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
  }
  

内容的提问来源于stack exchange，提问作者Saif Sakib