iphone - iphone 上的 iscroll : visual distortions. 我怀疑它与硬件有关？

Question

我为 Android 和 iPhone 编写了一个 JQM 网络应用程序，该应用程序在一个自定义 native 容器中运行，该容器带有一堆供应商库，包括一个自定义版本的 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 行代码。

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

Answer 1

我在使用 iScroll 5 时遇到了一些问题，当滚动到某些元素时图像甚至文本会变形(在浏览器上工作正常但在 iPhone/iPad 上失败)。

我有 4 个选项卡，每个选项卡有一个卷轴。第一个工作正常(可能是因为它的元素较少？)，但其他的在滚动到最后一个元素左右时失败。

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

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