ios滚动列表白屏问题

移动端分页列表，在ios上滚动加载分页时候，使用scrollTop，会引起白屏问题。

看不少文章说是使用了-webkit-overflow-scrolling: touch;引起的硬件加速问题。亲测删除问题仍然存在。

this.$nextTick(() => {
  window.scrollTo(0, 1); 
  
  window.scrollTo(0, 0);
})

 
#app {
  -webkit-overflow-scrolling: touch;
}
 
 
#app > * {
  transform: translateZ(0px)
  -webkit-transform: translateZ(0px)
}

以上两种方法都试过，不起作用。

将-webkit-overflow-scrolling先设置成auto再设成touch的方案，同样不起作用。

 

最终使用一个简单粗暴方案解决：

先this.$refs.chat.style = `display: none;`再

setTimeout(() => {
    this.$refs.chat.style = `display: block;`
    this.$refs.chat.scrollTop = 100000;
}, 0)

使整个滚动区域回流，白屏问题解决。

但是这个方案有两个缺点：

一、电脑上会出现明显闪烁的问题，ios上不明显。

二、如果在dom上使用了变量的形式动态配置样式，在display:none;后会失效，需要在display:block;的同时处理。