javascript - -webkit translate3d 大元素断断续续

标签 javascript css iphone-web-app webkit-transform translate3d

我正在使用 -webkit-transform: translate3d(x,y,z) 和 cubic beizer 计时功能结合 iPhone 的触摸事件来制作自定义滚动方法类型的东西.

问题是,如果元素(在本例中为页面 div)超过一定大小,动画会断断续续(元素停止半秒)。如果我的宽度为 320 像素,高度为 1000 像素,这一切都很好,但是如果我将高度设置为 2000 像素,我就会出现严重的口吃。请注意,它只在开始时卡顿一次,几乎就像它正在加载,然后就没问题了。

是否有任何已知的解决方法?

最佳答案

两种可能的解决方法。

首先关闭其他 CSS 属性,即位置(顶部、左侧、右侧、底部)和不透明度。混合使用它们,尤其是当它们具有动画效果时,可能会导致性能问题。

您可以尝试尽可能多地关闭,然后查看问题是否得到解决。如果是,则将它们一一打开,直到找到问题属性。

其次,将您的内容包装在 iframe 中。即使 iframe 设置为填充 View ,当它包含非常大的图像时,它也可以显着提高性能。

关于javascript - -webkit translate3d 大元素断断续续,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10781438/

相关文章:

javascript - 使用 require.js 扩展 jquery(多个扩展)?

html - 为什么nth-child选择器会选择这些元素呢?

iPhone Web 应用程序自动播放嵌入式 Youtube

iPhone 离线网络应用程序缓存不起作用

Javascript Web 应用程序,控制 iPhone 缩放输入焦点和模糊

javascript - 延迟循环元素

javascript - JsTree如何在刷新时load_all节点

javascript - 为什么我在使用 youtube api 时收到未经授权的消息

php - Jquery 没有为我的导航菜单添加或删除我选择的类

jquery - 在 div 上悬停动画从左到右悬停的 div 离开屏幕并从左到右动画隐藏在屏幕外的新 div