Cordova/PhoneGap页面fixed定位Footer在iOS11 iPhone X上滚动异常求助

我之前做Cordova项目时也碰到过一模一样的问题！iOS 11的WebView（Cordova就是基于它运行的）对position: fixed元素的处理存在滚动延迟bug，在iPhone X这种有特殊屏幕布局的设备上表现得尤其明显。下面是我亲测有效的几个解决方案，按优先级推荐：

1. 重构滚动容器（最彻底的解决方法） #

这个方法从根源上避免了body滚动带来的fixed元素异常，把滚动区域限制在页面内部的容器里：

/* 锁定html和body的高度，禁止它们滚动 */
html, body {
  height: 100%;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

/* 把所有页面内容放到这个滚动容器中 */
.page-content {
  height: 100%;
  overflow-y: auto;
  /* 保留iOS原生顺滑的滚动体验 */
  -webkit-overflow-scrolling: touch;
}

/* 你的fixed footer基础样式，同时适配iPhone X底部安全区 */
footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding-bottom: env(safe-area-inset-bottom);
}

原理：当滚动的是内部容器而非整个页面时，fixed元素相对于视口的定位不会被滚动行为干扰，自然就不会出现滞后偏移的情况。

2. 开启硬件加速修复渲染延迟 #

如果不想重构现有布局，可以给footer添加硬件加速属性，让浏览器把它放到单独的图层渲染，避免滚动时的重绘延迟：

footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding-bottom: env(safe-area-inset-bottom);
  /* 触发硬件加速，解决滚动时的滞后问题 */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

这个方法操作简单，但如果页面元素较多，可能会有轻微的性能影响，不过对于大多数项目来说完全可控。

3. 禁用iOS弹性滚动（可选优化） #

如果你的项目不需要iOS的弹性滚动效果，可以在Cordova的config.xml里添加以下配置，减少滚动行为对fixed元素的干扰：

<preference name="DisallowOverscroll" value="true" />

建议先尝试第一种方案，它能彻底解决这类fixed元素的滚动异常问题，再结合安全区适配，就能完美适配iPhone X设备了。

内容的提问来源于stack exchange，提问作者Het ROB-Team