iOSsafari浏览器溢出：滚动元素无法滚动的bug深入了解，当iOSsafari浏览器出现大于父容器的svg元素时，我想添加溢出：滚动到父容器实现内部滚动效果但失败。但是当时并没有意识到这个问题的实际原理。我只知道safari为滚动元素添加了一个原生的scrollView块。Bug原理最近在做项目的时候遇到了Safari的另一个bug，但是却让我明白了这个问题的最终原因。项目bug是这样的：我在用Nuxt做一个展示站点，刚进入页面的时候需要用锚链接跳转到某个位置。这里我最初使用的是routerapi提供的scrollBehavior方法，但是这个方法在Nuxt上有局限性。我将实现方式改为：进入页面后，动态计算不同锚点位置的scrolltop，然后设置父元素的scroll位置。在其他浏览器上是可以的，但是在safari上有一个问题：刚进入页面时无法正确获取元素的scrolltop，小了很多，需要页面加载后才能获取。原因是我在页面上放了很多图片占用自己的空间，而在页面刚加载的时候，其他浏览器会预先获取图片的大小并给它一个空间，不管图片是否是loadedornot页面总高度是固定的。而safari不同，图片加载不成功时高度为0。图片加载不成功时高度为0。哇，好久不见了这时候想起之前safari上的scrollbug，查阅相关资料后得出一个结论：safari浏览器在渲染页面元素时，会提前经过webkit浏览器的渲染过程：构建DOM树并构建CSS规则树基于DOM和CSS树构建渲染树。根据渲染树计算页面的布局。渲染页面注意第三步和第四步，safari浏览器在构建渲染树时，会提前找到对应的overflow:scroll元素，在计算页面布局时，父元素的高度和高度将计算子元素的。如果子元素高于父元素，则在渲染页面时会为其创建一个原生的scrollView。这个scrollView有什么用？其实就是给它一个弹跳的效果（但确实有很好的用户体验）。当子元素为某种媒体格式时，如img、object(svg)等，safari在加载完成后才会在布局中对其进行计算，即高度为0，则子元素的高度元素必须小于父元素的高度，safari不会给父元素一个原生的scrollView。解决办法是反其道而行之。出现这种问题时，给子元素一个wrapping元素，设置wrapping元素的min-height大于父元素的高度，让父元素有一个scrollView。当加载子元素时，包裹元素被拉伸，父元素可以自由滚动。
