为了项目在移动端体验起来更加流畅,我们通常给元素设置 -webkit-overflow-scrolling: touch;
属性来实现,具体原因,CSS参考手册给了详细的解释
也就是说:这个属性是通过设置滚动的回弹效果,让页面在滑动的时候看起来流畅。
但当我在项目里面给 body
设置这个属性,同时给某个元素设置 overflow:scroll
,并且这个元素里面存在 fiexd
定位的子元素,此时发现,固定定位元素无法显示,即使我给固定定位的元素设置 z-index:980
来提高他的层级,问题依然存在。
刚开始以为是 ios
系统升级导致的,理由如下:
第一:这个 -webkit-overflow-scrolling: touch;
属性之前用过,但是没有遇到过今天所出现的定位元素无法显示的问题。
第二:这个问题在 ios
下才会存在,Android
不存在这个问题。
经过调试发现,如果去掉固定定位元素的父元素的 overflow:scroll
属性,定位元素就可以显示。但是通过去掉父元素滚动的属性来解决这个问题,不是一个好的方案。关键还是需要找到问题的本质原因。
经过研究发现,这个问题很早就