iphone上的iscroll：视觉扭曲。我怀疑它与硬件有关？答案

【问题标题】：iscroll on iphone: visual distortions. I suspect it's hardware related?iphone上的iscroll：视觉扭曲。我怀疑它与硬件有关？
【发布时间】：2014-02-12 00:35:24
【问题描述】：

我为 Android 和 iPhone 编写了一个 JQM Web 应用程序，该应用程序在一个自定义本机容器中运行，该容器附带一堆供应商库，包括一个自定义版本的 iScroll。最近，我们从供应商处升级了库，包括 iScroll。现在，iPhone 用户在某些情况下会看到视觉失真（截图：http://i.stack.imgur.com/mCUyB.png）。滚动后失真会自行纠正。

症状：

正在屏幕右侧绘制水平线
iscroll div 中的元素超出了右侧。（请注意，div 在左侧有圆形边缘，但在右侧没有。这也会在滚动后自行纠正。

当满足这两个条件时，就会触发失真：

下载更大的数据集后，导致更多 DOM 元素附加到 iscroller
当用户向后导航时。本质上，当 JQM 页面及其附加元素从隐藏变为可见时。

div iscroll的CSS代码：

element.style {
    -webkit-transition: -webkit-transform 0ms;
    transition: -webkit-transform 0ms;
    -webkit-transform-origin: 0px 0px;
    -webkit-transform: translate3d(0px, -131px, 0px) scale(1);
}

更多观察：

我怀疑iscroll是因为之前的iscroll版本没有使用-webkit-transform。
在 iPhone 上，-webkit-transform: translate3d 是硬件加速的。
失真仅在 iPhone 上出现，在 Android 上没有。

不确定我应该提供哪些其他信息。我可以提供 iscroll 的代码，但它是 800 行代码。

这是我在这里的第一篇文章。温柔点。

【问题讨论】：

标签： iphone css animation iscroll webkit-transform

【解决方案1】：

我在使用 iScroll 5 时遇到了一些问题，当滚动到某些项目时，图像甚至文本都会失真（在浏览器上运行良好，但在 iPhone/iPad 上失败）。

我有 4 个标签，每个标签都有一个滚动条。第一个工作正常（可能是因为它的项目较少？），但其他项目在滚动到最后一个项目时会失败。

经过一些测试，我注意到删除容器上的 CSS 过渡（使用我用来调用 iScroll 的#id）解决了问题。不过，我仍然保持过渡。我只需要将它移到 DOM 树上的另一个容器中。（在我的情况下，当滚动完成加载时，它只是淡入淡出）。

这是一个非常奇怪的错误...希望它也可以帮助您解决问题。

【讨论】：