3

我为 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 行代码。

这是我在此的头一篇博文。要温柔。

4

1 回答 1

1

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

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

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

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

于 2014-02-11T16:35:24.517 回答