cod*_*rer 160 css html5 mobile-safari ipad ios
我目前正在使用html5和jQuery for iPad Safari开发一个Web应用程序.我遇到了一个问题,当我向下滚动它们时,大的滚动区域会导致屏幕外的元素在延迟后出现.
我的意思是,如果我有一行图像(或者甚至是带有渐变的div)在屏幕外,当我向下(或向上)向下滚动时,预期的行为是元素在屏幕上显示为我正在滚动它.
然而,我所看到的是,直到我将手指从屏幕上抬起并且滚动条完成其所有动画时才会出现该元素.
这对我来说是一个非常明显的问题,使整个事情看起来不稳定,尽管事实并非如此.我猜测iPad Safari正在尝试做一些事情以节省内存.有什么办法可以防止这种不稳定的发生.此外,如果有人能够了解iPad Safari实际上正在尝试做什么,我也将不胜感激.
小智 180
您需要欺骗浏览器以更有效地使用硬件加速.您可以使用空的3d变换执行此操作:
-webkit-transform: translate3d(0,0,0)
特别是,你需要在具有position:relative;声明的子元素上使用它(或者,只需全力以赴地对所有子元素执行).
不是一个保证修复,但大部分时间相当成功.
帽子提示:https://web.archive.org/web/20131005175118/http : //cantina.co/2012/03/06/ios-5-native-scrolling-grins-and-gothcas/
cod*_*rer 65
这是我的问题的完整答案.我最初将@Colin Williams的回答标记为正确的答案,因为它帮助我找到了完整的解决方案.社区成员@Slipp D. Thompson在我问了大约2.5年后编辑了我的问题,并告诉我,我正在滥用SO的问答形式.他还告诉我要另外发布这个答案.所以这是解决我问题的完整答案:
@Colin Williams,谢谢!您的答案和您链接的文章让我领导尝试使用CSS.
所以,我之前使用的是translate3d.它产生了不必要的结果 基本上,它会切断屏幕外的RENDER元素,直到我与它们交互.所以,基本上,在横向方向,我的网站的一半是在屏幕外没有显示.这是一个iPad网络应用程序,因为我正在修复.
将translate3d应用于相对定位的元素解决了这些元素的问题,但其他元素在屏幕外停止渲染.除非我重新加载页面,否则我无法与之交互的元素(图稿)将永远不会再渲染.
完整的解决方案:
*:not(html) {
-webkit-transform: translate3d(0, 0, 0);
}
现在,虽然这可能不是最"有效"的解决方案,但它是唯一有效的解决方案.使用时,Mobile Safari不会渲染屏幕外的元素,有时也会渲染不规则的元素-webkit-overflow-scrolling: touch.除非translate3d应用于因滚动而可能在屏幕外的所有其他元素,否则这些元素将在滚动后被切断.
所以,再次感谢,并希望这有助于其他一些失去的灵魂.这肯定帮了我很大的时间!
Gui*_*ier 12
针对除html之外的所有元素: *:not(html)
在我的案例中引起了其他元素的问题.它修改了堆叠上下文,导致一些z-index中断.
我们应该更好地尝试定位正确的元素并仅适用-webkit-transform: translate3d(0,0,0)于它.
当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