0

我正在使用 Cordova、Bootstrap 和 Angular JS (1.3.x)开发一个混合应用程序，并在 Chrome 桌面浏览器和 Android 设备（棒棒糖，5.0.2）上对其进行测试。

在特定视图中，我使用ngDialog打开一个模式窗口。此对话框中的内容可能超过典型智能手机尺寸的高度，因此需要垂直滚动。问题来了：

大多数应该显示在对话框底部的元素（最初看不到）没有出现或没有被渲染。当我盲目地点击应该消失的交互元素的区域时，它们会被绘制。当我再次向上滚动时，顶部的元素消失了。 此行为在 Android 4.4 上不存在。

现在我可以在我的 Windows Chrome 浏览器 (v43) 上重现此错误。

这些是步骤：

  1. 运行这个 Plunkr http://embed.plnkr.co/VGYUe2i9vwsQZ21vc3LB/preview
  2. 使用最新的 Chrome 版本进行测试
  3. 确保这个 plunker 显示在嵌入式视图中（重要）
  4. 打开 Chrome 开发者工具
  5. 单击“切换设备模式”（智能手机图标）（重要）
  6. 将垂直分辨率限制在大约 600px 的高度单击“打开对话框”并向下滚动到底部
  7. 你能读懂“你好，你看到我了吗？” ?
  8. 如果没有，请按文本框顶部或下方的面板之一，这将导致重新绘制并且您可以看到文本。

这是它的外观：

不正常 -> 红色标记框中没有文字： 不正常 -> 红色标记框中没有文字

OK -> 点击它或浏览器标签切换后 OK -> 点击它或浏览器标签切换后

我在邮递员博客上找到了这篇文章，但“修复程序”在我的情况下似乎不起作用。 http://blog.getpostman.com/2015/01/23/ui-repaint-issue-on-chrome/

有人可以指出我正确的方向吗？

4

1 回答 1

4

我按照链接博客文章中的说明进行操作，这些似乎对我有用。具体来说，添加

-webkit-transform: translate3d(0,0,0);

到我的 CSSngDialog-content有overflow-y: scroll.

现在 div 为我滚动加载。

另一个好消息是，至少我的问题似乎在 Chrome Canary 中消失了，因此可能值得看看该问题是否仍然存在。

于 2015-06-01T01:08:26.187 回答