html 二级菜单延迟消失,iPad Safari滚动导致HTML元素消失，并重新出现延迟

您需要诱使浏览器更有效地使用硬件加速。 你可以用一个空的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这个方法似乎工作。

谢谢@科林·威廉姆斯指着我朝着正确的方向前进。

我对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;