显示模态窗口时显示Chrome / Webkit UI重绘问题（ngDialog）

Question

我正在使用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. 确保此插件显示在嵌入视图中（重要）
4. 打开Chrome开发者工具
5. 点击＆＃34;切换设备模式＆＃34; （智能手机图标）（重要）
6. 将垂直分辨率限制为高度约600px单击＆＃34;打开对话框＆＃34;并向下滚动到底部
7. 你能读懂＆＃34;你好，你看到了吗？＆＃34; ？
8. 如果没有，请按下文本框顶部或下方的其中一个面板 将导致重画，你可以看到文字。

它的外观如下：

不行 - ＆gt;标记为红色框中没有文字：

好的 - ＆gt;点击它或浏览器选项卡切换后

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

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

Answer 1

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

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

到我的ngDialog-content的CSS overflow-y: scroll。

现在div为我滚动加载。

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