苹果iPhone 11设备滚动网站时出现延迟白屏问题技术问询

• 排查CSS硬件加速相关配置
  iOS Safari内核的3D渲染缓存有固定阈值，若你给全局滚动容器添加了transform: translate3d(0,0,0)、will-change: all这类强制开启硬件加速的全局属性，滚动时超出缓存阈值就会触发白屏。可先注释所有非必要的硬件加速相关属性验证是否恢复。
• 排查滚动容器属性配置
  若你没有使用原生body滚动，而是自定义了div作为滚动容器，首先确认你设置了-webkit-overflow-scrolling: touch保证iOS顺滑滚动的基础属性，其次检查没有同时配置冲突的overflow属性，也不要给滚动容器添加多余的裁切、滤镜属性，这类属性会导致滚动时渲染性能骤降。
• 排查滚动时的JS执行逻辑
  如果你的代码监听了scroll、touchmove事件，或者使用IntersectionObserver做元素懒加载，回调中如果存在大量DOM操作、样式修改、复杂计算，会阻塞渲染线程导致白屏。可先注释所有滚动相关的JS逻辑验证是否是代码逻辑导致的问题。
• 排查懒加载元素的占位配置
  如果页面内图片、组件用了懒加载逻辑，确认所有懒加载元素的占位容器宽高是固定值，不要出现滚动时元素加载后占位尺寸突变触发整页重排，也不要给滚动时加载的元素添加复杂的入场动画，iOS内核对滚动过程中的动画渲染优先级极低，极易触发渲染异常。
• 排查固定定位元素配置
  页面内大量position: fixed的元素会持续触发离屏渲染，超出iPhone 11的渲染性能上限时就会出现白屏，可先将所有fixed定位元素临时改为position: absolute验证是否解决问题。

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