iPad Safari滚动导致HTML元素消失，并重新出现延迟
我目前正在开发一个使用html5和jQuery for iPad Safari的web应用程序。 我遇到了一个问题，在这个问题中，当我向下滚动时，大的滚动区域会导致屏幕外的元素在延迟后出现。
我的意思是，如果我有一排图像（甚至是一个渐变的div），这是不在屏幕上的，当我向下滚动（或向上）时， 预期的行为是该元素出现在屏幕上我滚动到它。
不过，我所看到的是，直到我将手指从屏幕上抬起，滚动条才完成所有的animation，元素才会出现 。
这给我造成了一个非常明显的问题，使整个事情看起来波涛汹涌，虽然事实并非如此。 我猜iPad Safari正试图做一些事情来节省内存。 有什么方法可以防止这种波折的发生？ 另外，如果有人可以说明iPad Safari实际上正在尝试做什么，我也会很感激。
您需要诱使浏览器更有效地使用硬件加速。 你可以用一个空的3d变换来做到这一点：
-webkit-transform: translate3d(0,0,0)
特别是，你将需要这样的子元素有一个position:relative; 声明（或者，全力以赴，去做所有的子元素）。
不是一个有保证的解决scheme，但大部分时间是相当成功的。
帽子提示： https ： //web.archive.org/web/20131005175118/http : //cantina.co/2012/03/06/ios-5-native-scrolling-grins-and-gothcas/
这是我的问题的完整答案。 我最初把@Colin Williams的答案标记为正确的答案，因为它帮助我得到了完整的解决scheme。 一位社区成员@Slipp D. Thompson在我问了大约2.5年之后编辑了我的问题，并告诉我我正在滥用SO的Q＆A格式。 他还告诉我分开发表这个答案。 所以这是解决我的问题的完整答案：
@Colin威廉姆斯，谢谢！ 你的回答和你链接的文章给了我一个带CSS的尝试。
所以，我以前使用translate3d。 它产生了不想要的结果。 基本上，它会砍掉和NOT RENDER屏幕外的元素，直到我与他们互动。 所以，基本上，在横向方向上，我的网站的一半是不在屏幕上显示。 这是一个iPad的networking应用程序，由于我正在修复。
将translate3d应用于相对定位的元素解决了这些元素的问题，但是其他元素在屏幕之外停止渲染。 除非我重新加载页面，否则我无法与（艺术作品）交互的元素将不会再次渲染。
完整的解决scheme：
*:not(html) { -webkit-transform: translate3d(0, 0, 0); }
现在，虽然这可能不是最“高效”的解决scheme，但它是唯一有效的解决scheme。 在使用-webkit-overflow-scrolling: touch时，Mobile Safari不会渲染屏幕外的元素，或者有时呈现不规则的元素。 除非translate3d适用于所有可能由于该滚动而离开屏幕的其他元素，否则这些元素将在滚动后被截断。
所以，再次感谢，并希望这有助于其他一些失去灵魂。 这肯定帮了我很大的时间！
针对所有元素，但HTML： *:not(html)在我的情况下在其他元素上引起的问题。 它修改了堆栈上下文，导致一些z-index中断。
我们应该更好地尝试定位正确的元素，并将-webkit-transform: translate3d(0,0,0)仅应用于它。
将-webkit-transform: translate3d(0,0,0)静态添加到一个元素不适用于我。
我dynamic地应用这个属性。 例如，当页面滚动时，我在元素上设置了-webkit-transform: translate3d(0,0,0) 。 然后在短暂的延迟之后，我重置了这个属性，也就是-webkit-transform: none这个方法似乎工作。
谢谢@科林·威廉姆斯指着我朝着正确的方向前进。
-webkit-transform: translate3d(0,0,0)只适用于div标签，但不适用于iframe :(。
详情请访问：
我对ios7上的iscroll 4.2.5也有同样的问题。 整个滚动元素就消失了。 我已经尝试添加translate3d(0,0,0)在这里build议，它已经解决了这个问题，但它禁用了iscroll“snap”效果。 解决scheme给与"position:relative; z-index:1000;display:block" css属性到容纳滚动元素的整个容器，并且不需要给translate3d给子元素。
我敢肯定，我刚刚解决这个：
overflow-y: auto;
（推测只是overflow: auto;也可以根据您的需要工作。）
在某些情况下，应用旋转和/或使用Z指数 。
旋转 ：现有的用于旋转元素的-webkit-transform声明可能不足以解决外观问题（如-webkit-transform: rotate(-45deg) ）。 在这种情况下，您可以使用-webkit-transform: translateZ(0px) rotateZ(-45deg)作为技巧（ 介意旋转Z ）。
Z指数 ：与旋转一起，您可以定义一个正的z-index属性，如z-index: 42 。 在“旋转”下描述的上述步骤足以解决问题，即使是空的translateZ(0px) 。 我怀疑在这种情况下Z指数可能已经导致了消失并重新出现在第一位。 在任何情况下， z-index: 42属性都需要保留 – -webkit-transform: translateZ(42px)是不够的。
这是开发者面临的一个非常普遍的问题，主要是由于Safari's属性不是重新定义position : fixed元素position : fixed 。
所以要么改变position属性，要么像其他答案中提到的那样需要应用一些hack。
链接1
LINK2
在我的情况下（iOS Phonegap应用程序），将translate3d应用到相对子元素不能解决问题。 我的可滚动元素没有设置高度，因为它是绝对定位的，我正在定义顶部和底部位置。 什么修复它为我添加一个最小高度（100px）。
当translate3d不起作用时，尝试添加透视图。 它总是为我工作
transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); perspective: 1000; -webkit-perspective: 1000;
http://blog.teamtreehouse.com/increase-your-sites-performance-with-hardware-accelerated-css
