问题描述:IOSAPP内嵌一个H5页面,页面较长,大约1.6屏高,由于列表滑动不流畅,所以我们使用-webit-overflow-scrolling:touch;这个只是针对ios端的物理滚动属性进行了调整,但是滚动很流畅,部分区域因为增加了这个属性而出现了滑动白屏。原来的html结构还是显示不出来。调试过程:一开始问题定位在空白区域样式问题,包括重置溢出,JS强制显示都没有效果。最后发现是长页面有一个框导致滚动没有定义高度。这个高度被里面的内容拉长了,所以我尝试给列表框设置一个高度。果然,滑动过程中没有出现空白区域。最后,forfit使用了flex布局,使列表框填充屏幕的其余部分,内部框定义高度。结论:使用-webit-overflow-scrolling:touch;滑动过程出现这种白屏,暂时测试小范围滚动的长页面,如果是特别长的数据列表测试,不会出现这个问题。提示:此属性会消耗性能。如果页面有性能要求,不是特别长的页面可以通过其他方法改进:要正常使用兼容-webkit-overflow-scrolling:touch的属性,顶栏和底栏最好不要写固定定位,不然会零星出现。
