iOS设备设置scrollTop滚动时出现白屏问题及原因咨询

当可滚动元素处于快速滚动状态时，通过JavaScript设置scrollTop强制滚动到底部，仅在iOS Safari（含WKWebView环境）中出现滚动区域白屏，PC和Android端无异常，这个问题的核心原因和iOS Safari的滚动架构设计直接相关：

• iOS Safari为了保证滚动流畅性，将滚动操作交由独立的硬件加速滚动线程处理，这个线程与JavaScript运行的主线程是隔离的。当元素处于快速滚动状态时，滚动线程正在持续处理原生的滚动动画，维持滚动位置的实时更新。
• 此时主线程直接修改scrollTop，相当于强行中断了滚动线程的正常动画流程，导致滚动线程的位置状态与主线程设置的状态瞬间出现不一致。浏览器渲染层无法及时同步两者的状态，就会出现短暂的渲染空白（白屏）。

你提到的添加scroll-behavior: smooth;样式能解决问题，本质是这个属性把手动设置scrollTop的操作纳入了浏览器的平滑滚动调度队列，让滚动线程来统一处理滚动动作，避免了主线程和滚动线程的状态冲突，虽然牺牲了部分滚动速度，但保证了渲染的同步性，从而消除了白屏。

这种问题属于iOS Safari滚动优化机制带来的副作用——为了流畅性隔离滚动线程，但也导致主线程直接干预滚动状态时容易出现渲染不同步的情况。

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