Chrome/Webkit UI 显示模态时重绘问题 window (ngDialog)

Chrome/Webkit UI repaint issue when showing a modal window (ngDialog)

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

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

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

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

这些是步骤：

  1. 运行 这个 Plunkr http://embed.plnkr.co/VGYUe2i9vwsQZ21vc3LB/preview
  2. 使用最近的 Chrome 版本
    3. 进行测试
  3. 确保此插件显示在嵌入式视图中（重要）
  4. 打开Chrome开发者工具
  5. 单击 "Toggle device mode"（智能手机图标）（重要）
  6. 将垂直分辨率限制在大约 600 像素的高度单击 "open dialog" 并向下滚动到底部
  7. 你会读 "Hello, do you see me?" 吗？
  8. 如果没有，请按文本框顶部或下方的面板之一，这 将导致重新绘制，您可以看到文本。

这是它的样子：

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

确定->点击后或浏览器标签切换

我在 postman 博客上找到了这篇文章，但 "fixer" 似乎对我的情况不起作用。 http://blog.getpostman.com/2015/01/23/ui-repaint-issue-on-chrome/

有人能给我指出正确的方向吗？

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

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

我的 CSS 用于 ngDialog-content 其中有 overflow-y: scroll.

现在 div 为我加载滚动。

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