Cordova Android4.3 滑动时对元素的弹跳效果答案

【问题标题】：Cordova Android4.3 bounce effect on elements when swipingCordova Android4.3 滑动时对元素的弹跳效果
【发布时间】：2014-11-03 16:37:57
【问题描述】：

Android 4.3 发现此问题，IOS、Blackbarry、A4.4 均正常。并且仅在包装的应用程序中，在浏览器中也可以。因此，当上下滚动\滑动页面时，有几个屏幕具有奇怪的元素行为。它看起来像流体，或重新定位延迟。上下滑动时上下 +/- 7px。这影响的不是所有元素，而是页面上的 1-2 个块。

代码是这样的：

<div id="wrap">
    <div class="inner">
        <div class="content-block">
           Lorem ipsum
        </div>
        <div class="content-block">
           Lorem ipsum
        </div>
        <div class="content-block">
           Lorem ipsum with buggy scrolling effect
        </div>
        ....
        <div class="content-block">
           Lorem ipsum
        </div>
    </div>
</div>

还有 CSS：

#wrap {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

.content-block {
  font-size: 10px;
  padding: 5px 0;
}

根据 Stackofverflow 中的想法，我尝试删除填充，使用 .inner * {transform: translate3d(0,0,0)} 应用 hack，但没有运气。有任何想法吗？谢谢！

附言这是屏幕截图，也许有助于理解问题： https://www.dropbox.com/s/ocveuirxxc86chi/stack.jpg?dl=0

【问题讨论】：

当您说在浏览器中没问题时，您是在谈论用于 wabviews 的设备默认浏览器（即不是 chrome，除非在 android 4.4 中）？
是的，适用于 Android 4.3。它是铬
据我所知，Chrome 仅在 4.4 之后才用于 web 视图......但也许 Chrome 已默认安装在您的手机上并隐藏了旧的 Webkit 浏览器（也许您无论如何都可以访问它并且可以用它来测试你的应用吗？）
哦，是的，看起来它在我们的测试设备上已更改为 Chrome... 将尝试找到一种方法在 stock webview 上进行测试，也许它会有所帮助。谢谢！

标签： android html css cordova

【解决方案1】：

要使所有 android 4.0+ 设备具有相同的行为，除了 Cordova 之外，您可以尝试使用 Crosswalk。

使用当前版本，结果应该与使用 Chrome 作为 webview 的 Kit Kat 相同。

基本上，Crosswalk 让您使用最新版本的 Cromium 作为 webview，而不是设备的默认 webview。

好处

您将获得对所有设备的相同 HTML5/CSS 3 支持
你应该获得性能
在新设备上进行测试时不再有惊喜

缺点

暂时不太容易设置
在您的应用中添加了 Chromium 版本后，apk 变得更大了
至少需要安卓4.0，所以告别安卓2.3手机支持

这是一个将现有项目从默认 web 视图迁移到 Crosswalk 的教程：https://crosswalk-project.org/documentation/cordova/migrate_an_application.html

【讨论】：