在开发过程中，发现IOS页面在滚动时，图片加载很慢或者直接不加载。
定位bug的过程是十分痛苦的，因为问题只在safari浏览器中出现，抓包请求图片都是正常的，但是显示的时候就很奇葩。 似乎是safari做了某种限制，只渲染当前视口的图片，但是当我滚动页面的时候，之前不在当前视口的图片依旧没有被渲染
由于本人英语比较水，中文又没有找到比较合适的答案，在漫长的google过程中。终于搜到了需要的信息，下面是链接
https://stackoverflow.com/questions/9807620/ipad-safari-scrolling-causes-html-elements-to-disappear-and-reappear-with-a-dela
其中有句话引起了我的注意 Mobile Safari does not render the elements that are offscreen, or sometimes renders erratically, when using -webkit-overflow-scrolling: touch （使用-webkit-overflow-scrolling时，Mobile Safari不会渲染屏幕外的元素，有时甚至无法正常渲染：）
在开发过程中，发现IOS页面在滚动时，图片加载很慢或者直接不加载。
定位bug的过程是十分痛苦的，因为问题只在safari浏览器中出现，抓包请求图片都是正常的，但是显示的时候就很奇葩。
似乎是safari做了某种限制，只渲染当前视口的图片，但是当我滚动页面的时候，之前不在当前视口的图片依旧没有被渲染
由于本人英语比较水，中文又没有找到比较合适的答案，在漫长的google过程中。终于搜到了需要的信息，下面是链接 https://stackoverflow.com/questions/9807620/ipad-safari-scrolling-causes-html-elements-to-disappear-and-reappear-with-a-dela
其中有句话引起了我的注意
Mobile Safari does not render the elements that are offscreen, or sometimes renders erratically, when using -webkit-overflow-scrolling: touch
（使用-webkit-overflow-scrolling时，Mobile Safari不会渲染屏幕外的元素，有时甚至无法正常渲染：）
我们本身并没有设置这个属性，可能是safari的默认值。解决方案就是在那个滚动容器中加上
-webkit-transform: translate3d(0,0,0)开启硬件加速。注意：使用transform属性，会导致容器内部的position:fixed定位变成absolute定位，其中的top，left偏移量都是基于设置transform属性的这个父容器的